为啥浮动元素中的浮动 <input> 控件在 IE7 中向右滑动太远，而在 Firefox 中却没有？

Posted 2023-03-06

【中文标题】为啥浮动元素中的浮动 <input> 控件在 IE7 中向右滑动太远，而在 Firefox 中却没有？

【英文标题】：Why does a floated <input> control in a floated element slide over too far to the right in IE7, but not in Firefox?为什么浮动元素中的浮动 <input> 控件在 IE7 中向右滑动太远，而在 Firefox 中却没有？

【发布时间】：2010-09-18 11:16:43

【问题描述】：

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

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

蓝色框是<label> 标签的临时样式，橙色线条是<div> 标签的临时边框样式（所以我可以看到它们延伸和中断的位置）。 <label> 的样式为 float: left，右侧的 <div 也是如此。此外，<div> 的后代控件也纯粹是float:left，因此它们将排列在<div> 的顶部（因为下面还有一些更高的控件，例如多行文本框）。

单选按钮由 ASP 控件生成，因此它们被包裹在 <span> 中 - 也向左浮动，因为它是 <div> 的后代。

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

有一些细微的渲染差异，但让我抓狂的是<input> 控件旁边的额外空白区域！请注意，单选按钮和复选框周围的<span> 排列正确。

虽然它们没有显示，但下拉列表和列表框也会发生同样的事情。我没有尝试将输入控件包装在<span> 中，但这可能会奏效。不过，这是一个丑陋的 hack。

我已经尝试了几个 IE7 解决方法来解决框问题，并且我已经编辑了 CSS，直到我处于纯巫术模式（即，进行随机更改以希望某些东西有效）。就像我说的，我希望有人看到这个并说，“我以前见过！试试这个……”

有人吗？

跟进 1：

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

跟进 2：

这里是上面生成的代码的小sn-p（第一个控件和最后一个控件）。请注意，此代码是由 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"  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;

解决方案！

马修在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>...

*** 又来救援了！

【问题讨论】：

希望看到 ASP 生成的源代码。

我只能表示哀悼。

确保您使用的是正确的文档类型。

@Mike: 是的，很难发布源代码的原因是我有 ASP.Net 代码，从 ASP 服务器控件生成的代码，然后我使用 jQuery 添加一些用于分组和日历选择器等的动态 HTML。Firebug 是查看“真实”源的唯一方法，到那时它已经很丑了。

好的，我分解并提取/添加了生成的代码和 CSS...

【参考方案1】：

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

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

【讨论】：

我会试一试，但我已经试过了： .FormGroup > * margin: 0 0 0 0;向左飘浮; background-color: Yellow; 覆盖父 的边距，但它不起作用。我会尝试额外的 span 或 div，但希望有更漂亮的方法。

链接看起来很棒 - 我明天会尝试并发布我的结果。不过，阅读这篇文章似乎是正确的答案！