CSS：IE 上的边距/填充导致浮动放置不正确答案

【问题标题】：CSS: margin/padding on IE cause floats to be placed incorrectlyCSS：IE 上的边距/填充导致浮动放置不正确
【发布时间】：2011-05-28 10:05:06
【问题描述】：

我无法让 IE7 正确浮动我的元素（FF 和 Chrome 按预期工作）。我想让“删除”按钮（这里是一个带有“sbutton”类的跨度）一直浮动到右边。在 IE 上，sbutton 没有第一行按预期一直浮动到右侧，但后续行仅浮动到它们上方 sbutton 的左侧：

Something some other text ----------------------------------[Delete]
Something Else some other text ---------------------[Delete]--------

这与按钮上的填充和边距有关：

.sbutton {
    background-color: #2E3239; color: white; border: 1px solid gray;
    font-family: "Trebuchet MS"; font-size: 90%; padding: 1px 3px; margin: 2px;
    -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;
}

如果我删除填充和边距，它们都会按预期浮动。

这是 HMTL：

<li>
     <span class="left"><b>Something</b> (#1102) some other text</span> 
     <span class="right"><a href="#" class="sbutton">Delete</a></span> 
</li> 
<li>
     <span class="left"><b>Something Else</b> (#1103) some other text</span> 
     <span class="right"><a href="#" class="sbutton">Delete</a></span> 
</li>

如果我删除外部跨度（具有“正确”类的跨度），我会在 FF 和 Chrome 上得到类似的行为。

为什么会发生这种情况，正确的方法是什么？

【问题讨论】：

标签： css internet-explorer css-float

【解决方案1】：

你需要清除你的花车。这是一种方法：

.clear {
    clear:both;
    font-size:0;
}

<li>
     <span class="left"><b>Something</b> (#1102) some other text</span> 
     <span class="right"><a href="#" class="sbutton">Delete</a></span> 
     <span class='clear'></span>
</li>

【讨论】：

感谢狄奥迪斯。知道为什么在 FF 和 Chrome 上不需要这样做吗？
确实如此。这次你很幸运 :) 另外，从 CSS 重置开始：developer.yahoo.com/yui/reset

【解决方案2】：

@parand - 这不是必需的，因为 IE 具有与 FF 或 Webkit 不同的盒子模型（这是驱动 chrome 和 safari 等的引擎）。通过强制清除，这是一种解决差异的方法。

【讨论】：