如何在Firefox＆amp;中的<ul>下显示元素IE8？</UL>

Question

我最近将针对问题“How can I get a <ul> to be evenly spaced across the content area it exists in?”提供的答案应用到我的标签列表中。

这对我来说很好，但是标签列表后面的任何元素都显示在<ul/>元素的右侧，而不是在它下面。我将clear: both;规则应用于我的<ul/>的CSS，这解决了FireFox中的问题。现在元素出现在列表下面，正如我所料......除了它在Internet Explorer 8中不起作用。

这是<ul/>：

的CSS

#SearchForm ul {
    width: 100%;
    list-style: none;
    padding:0;
    margin: 0 0 5px 0;
    clear: both; 
}

但是，如果我将宽度规则更改为width: 101%;，这将使所有内容在IE8和Firefox中正确显示。为什么这不适用于IE8？将东西设置为101％的宽度似乎有点笨拙。有没有更好的方法让我确保所有元素都显示在所有浏览器的<ul/>下？

Answer 1

正如Yi Jiang建议的那样，在clear: both之后将#SearchForm ul应用于该元素将解决问题：

<div id="SearchForm">
</div>
<div id="someOtherElement" style="clear: both">
</div>

当您向#SearchForm ul应用清除时，它无法按预期工作的原因是因为这只会告诉<ul>清除浮动，而不是<ul>之后的元素。这是updated example显示它的实际效果。