asp.net – 为什么浮动元素中的浮动控件在IE7中向右滑动太远,而

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

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

蓝色框是< label>的临时样式.标记和橙色线是< div>的临时边框样式标签(所以我可以看到它们延伸和断裂的位置). < label>的样式设置为float：left和右边的< div一样.此外,< div>的后代控件.也是浮动的：纯粹是这样他们将排在< div>的顶部(因为有一些较高的控件,如下面的多行文本框).

单选按钮由ASP控件生成,因此它们包含在< span>中. – 因为它是< div>的后代,所以也向左浮动.

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

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

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

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

任何人？

后续1：

我正在使用XHTML 1.0 Transitional< DOCTYPE>,所以我应该处于标准模式.

后续2：

以下是上面生成的代码的小片段(第一个控件和最后一个控件).请注意,此代码由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>

这是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;
}

解！
Matthew在IE/Win Inherited Margins on Form Elements年把这个页面指向了我,这就是问题所在.输入框继承了所有包含元素的左边距.我选择的解决方案是包装每个< input>无格式< span>中的元素.我一直在努力保持HTML的结构尽可能保持语义,所以我在$(document).ready()函数中使用jQuery命令解决了它：

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

请注意,这只会在IE上添加愚蠢的< span> …

StackOverflow再次救援！