Question

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

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

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

.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上获得类似的行为。

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

Answer 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>

Answer 2

@parand - 没有必要，因为IE拥有与FF或Webkit不同的盒子模型（这是为chrome和amp; safari提供动力的引擎）。通过强制清除，这是差异的解决方法。

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

2 个答案: