html - 清除 ie6 和 7 的浮动最后一个 li 元素

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连续显示菜单项，但它也改变了#navdiv 的样式，菜单项不再出现在#navdiv 中。

如何解决 IE6 和 7 的这个问题？

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

Answer 1

您可以使用类似zoom: 1;for element 的 CSS 声明在 IE 6-7#nav上触发。hasLayout

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

注意：星号/星号前缀是针对 IE 6/7 的 CSS hack。

其他选项

• 使用overflow: hidden;for#nav元素创建新的块格式化上下文。
• 创建一个带有clear: both;CSS 声明的元素作为元素的最后一个子#nav元素。

您可能想看看Nicolas Gallagher 的 micro clearfix hack。

Answer 2

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

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

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