Hopefully a picture is worth a thousand lines of code because I don't want to have to strip down all of the ASP.Net code, HTML, JavaScript, and CSS to provide an example (but I'll supply what I can upon request if someone doesn't say "Oh, I've seen that before! Try this...") [Actually, I did post some code and CSS - see bottom of question].

希望一张图片值得上千行代码,因为我不想删除所有的ASP.Net代码,HTML,JavaScript和CSS来提供一个例子(但我会根据要求提供我可以提供的代码)如果有人不说“哦,我以前见过这个!试试这个...”)[实际上,我确实发布了一些代码和CSS - 见问题的底部]。

Here is a portion of a form page being displayed in Firefox: 为什么浮动元素中浮动的控件在IE7中向右滑动太远，而在Firefox中没有？

以下是Firefox中显示的表单页面的一部分:

The blue boxes are temporary stylings of a <label> tag and the orange lines are temporary border styles of the <div> tags (so I can see where they extend and break). The <label>'s are styled to float: left as are the <div's on the right. In addition, the descendant controls of the <div> are also float:left purely so they will line up on the top of the <div> (since there are some taller controls like multiline textboxes down below).

蓝色框是标签的临时样式,橙色线是

标签的临时边框样式(因此我可以看到它们延伸和断开的位置)。的样式设置为float:left和右边的

的后代控件也是浮动的:纯粹是这样它们将排在

的顶部(因为下面有一些更高的控件,如多行文本框)。

'一样。另外,

The radio buttons are generated by an ASP control, so they are wrapped in a <span> - also floated left since it is a descendant of the <div>.

单选按钮由ASP控件生成,因此它们被包裹在中 - 也是左侧浮动,因为它是

的后代。

Here is the same portion of the screen rendered in IE7: 为什么浮动元素中浮动的控件在IE7中向右滑动太远，而在Firefox中没有？

这是在IE7中呈现的屏幕的相同部分:

There are a few minor rendering differences, but the big one that's driving me crazy is the extra white space beside the <input> controls! Note that the <span>'s around the radio buttons and checkboxes line up correctly.

有一些小的渲染差异,但是让我疯狂的一个重要因素是控件旁边的额外空白区域!请注意,单选按钮和复选框周围的正确排列。

Although they aren't shown, the same thing happens with drop-down lists and list boxes. I haven't tried wrapping the input controls in a <span>, but that might work. It's an ugly hack, though.

虽然它们没有显示,但下拉列表和列表框也会出现同样的情况。我没有尝试在中包装输入控件,但这可能有效。不过,这是一个丑陋的黑客行为。

I've tried several of the IE7 workarounds for box issues and I've edited the CSS until I'm in pure voodoo mode (i.e., making random changes hoping something works). Like I said, I hope someone will look at this and say, "I've seen that before! Try this..."

我已经尝试了几个IE7解决方案的问题,我已经编辑了CSS,直到我处于纯巫毒模式(即随机变化,希望有些东西有效)。就像我说的那样,我希望有人会看到这个并说:“我以前见过这个!试试这个......”

Anyone?

Followup 1:

I'm using the XHTML 1.0 Transitional <DOCTYPE>, so I should be in standards mode.

我正在使用XHTML 1.0 Transitional ,所以我应该处于标准模式。

Followup 2:

Here is a small snippet of the generated code for the above (the first control and the last control). Note that this code was generated by ASP.Net and then dynamically edited by JavaScript/jQuery.

以下是上面生成的代码的小片段(第一个控件和最后一个控件)。请注意,此代码由ASP.Net生成,然后由JavaScript / jQuery动态编辑。

 <fieldset id="RequestInformation">
   <legend>Request Information</legend>
   <ol>
     <li>
       <label id="ctl00_ContentPlaceHolder1_txtRequestDate_L" class="stdLabel" 
         for="ctl00_ContentPlaceHolder1_txtRequestDate">Request Date:</label>
       <div class="FormGroup">
         <input id="ctl00_ContentPlaceHolder1_txtRequestDate" class="RSV DateTextBox hasDatepicker" 
           type="text" value="10/05/2004" name="ctl00$ContentPlaceHolder1$txtRequestDate"/>
         <img class="ui-datepicker-trigger" src="/PROJECT/images/Calendar_scheduleHS.png" alt="..." title="..."/>
         <span id="txtRequestDate_error"/>
       </div>
     </li>
     --STUFF DELETED HERE--
     <li>
       <label id="ctl00_ContentPlaceHolder1_chkAppealed_L" class="stdLabel" 
         for="ctl00_ContentPlaceHolder1_chkAppealed"> Request Appealed?</label>
       <div class="FormGroup">
         <span class="stdCheckBox">
           <input id="ctl00_ContentPlaceHolder1_chkAppealed" type="checkbox" name="ctl00$ContentPlaceHolder1$chkAppealed"/>
         </span>
       </div>
     </li>
   </ol>
 </fieldset>

Here is the relevant portion of the CSS (I double checked to make sure this duplicates the problem):

这是CSS的相关部分(我仔细检查以确保重复问题):

div
{
    border-style: solid;
    border-width: thin;
    border-color:Orange;
}

label
{
    border-style: solid;
    border-width: thin;
    border-color:Blue;
}

.FormGroup
{
    float:left;
    margin-left: 1em;
    clear: right;
    width: 75em;
}

.FormGroup > *
{
    float:left;
    background-color: Yellow;
}

fieldset ol
{
    list-style: none;
} 

fieldset li
{
    padding-bottom: 0.5em;
} 

li > label:first-child
{
    display: block;
    float: left;
    width: 10em;
    clear: left;
    margin-bottom: 0.5em;
}

em
{
    color: Red;
    font-weight: bold;
}

Solution!

Matthew pointed me to this page on IE/Win Inherited Margins on Form Elements and that was the problem. The input boxes were inheriting the left margins of all of their containing elements. The solution I chose was to wrap each <input> element in an unstyled <span>. I've been trying to keep the structure of the HTML as semantically sound as possible, so I solved it using a jQuery command in the $(document).ready() function:

//IE Margin fix: 
//  http://www.positioniseverything.net/explorer/inherited_margin.html
jQuery.each(jQuery.browser, function(i) {
    if($.browser.msie){
        $(":input").wrap("<span></span>");
    }
});

Note that this will only add the stupid <span>'s on IE...

请注意,这只会在IE上添加愚蠢的 ...

* to the rescue again!

*再次救援!

1 个解决方案

#1

The input is inheriting the margins from the surrounding div and the ol. If you surround it with another tag like a span or a div, it should solve your problem.

输入继承了周围div和ol的边距。如果用另一个标签(如span或div)包围它,它应该可以解决您的问题。

Edit: You can find more information and workarounds at http://www.positioniseverything.net/explorer/inherited_margin.html

编辑:您可以在http://www.positioniseverything.net/explorer/inherited_margin.html找到更多信息和解决方法。

#1