为什么浮动＆lt;输入＆gt;浮动元素中的控件在IE7中向右滑动太远，但在Firefox中没有？

Question

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

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

蓝色框是＆lt; label＆gt; 标记的临时样式，橙色线是＆lt; div＆gt; 标记的临时边框样式（所以我可以看到他们延伸和破坏的地方）。 ＆lt; label＆gt; 的样式设置为 float：left ，右侧是＆lt; div 。此外，＆lt; div＆gt; 的后代控件也是 float：left ，因此它们将排在＆lt; div＆gt; <的顶部/ code>（因为下面有一些更高的控件，如多行文本框）。

单选按钮是由ASP控件生成的，因此它们包含在＆lt; span＆gt; 中 - 因为它是＆lt; div＆gt;

以下是在IE7中呈现的屏幕的相同部分：

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

尽管未显示，但下拉列表和列表框也会出现同样的情况。我没有尝试在＆lt; span＆gt; 中包装输入控件，但这可能有用。不过，这是一个丑陋的黑客。

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

任何？

跟进1：

我正在使用XHTML 1.0 Transitional ＆lt; DOCTYPE＆gt; ，所以我应该处于标准模式。

后续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表单元素的继承边距上向我指了这个页面，那是问题。输入框继承了所有包含元素的左边距。我选择的解决方案是将每个＆lt; input＆gt; 元素包装在一个没有样式的＆lt; span＆gt; 中。我一直在努力保持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上添加愚蠢的＆lt; span＆gt; ...

StackOverflow再次救援！

Answer 1

input 继承了周围 div 和 ol 的边距。如果用另一个标签（例如span或div）包围它，它应该可以解决你的问题。

修改：您可以在 http：中找到更多信息和解决方法： //www.positioniseverything.net/explorer/inherited_margin.html