CSS:IE 上的边距/填充导致 float 放置不正确

Question

我无法让 IE7 正确 float 我的元素(FF 和 Chrome 按预期工作)。我想让“删除”按钮(这里是一个带有“sbutton”类的跨度)一直 float 到右边。在 IE 上，sbutton 没有第一行如预期的那样一直 float 到右侧，但后续行 float 到它们上方的 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;
}

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

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

如果我删除外部跨度(类为“right”的跨度)，我会在 FF 和 Chrome 上得到类似的行为。

为什么会这样，正确的做法是什么？

Answer 1

您需要清除 float 。这是一种方法:

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