清除浮动最后一个li元素为ie6和7

Question

我有以下html菜单

<ul>
    <li id="btnHome"><a href="#">Link One</a></li>
    <li id="btnAbout"><a href="#">Link Two</a></li>
    <li id="btnContact"><a href="#">Link Three</a></li>
    <li id="btnLinks"><a href="#">Link Four</a></li>
</ul>

以下是我的css

ul {
    margin: 0;
    padding: 0;
}

ul li {
    list-style-type: none;
}

#nav {
    background: #999;
    padding: 2%;
}

#nav ul li {
    float: left;
    margin-right: 2%;
}

我在上面用于IE6和7以便在一行中显示链接。 float: left连续显示菜单项，但它也会更改#nav div的样式，菜单项不再显示在#nav div中。

如何解决IE6和7的问题？

注意：我正在使用display: inline-block用于现代浏览器，这很好用。

Answer 1

您可以使用zoom: 1;之类的CSS声明来#nav元素在IE 6-7上触发hasLayout。

#nav {
    background: #999;
    padding: 2%;
    *zoom: 1;
}

注意： star/asterisk prefix是针对IE 6/7的CSS黑客攻击。

其他选项

• 使用overflow: hidden; #nav元素创建新的block formatting context。
• 使用clear: both; CSS声明创建一个元素作为#nav元素的最后一个子元素。

您可能需要查看 Nicolas Gallagher的 micro clearfix hack 。

Answer 2

不确定没有文档的其余部分，但您可以尝试添加

<div style="clear:both;"></div>

在你关闭你的ul元素后，你应该将包含#nav的大小增加到你的浮动内容所占据的位置。