Question

请看一下：

在所有现代浏览器甚至IE7 / 8和9中看起来都很好。但在IE6中，红色和粉红色边框不包含左侧浮动的<li>s。无论如何要使其发挥作用？

P.S。我永远不会支持IE6，但我的客户要求它:(

CSS：

@import "http://developer.yahoo.com/yui/build/reset/reset.css";
body { padding: 20px; }

#topnav { border: 4px solid red; }
#topnav ul { list-style-type: none; overflow: hidden; border: 4px solid pink; }
#topnav ul li { border-right: 1px solid green; float: left; }
#topnav ul li a { text-decoration: none; display: inline-block; height: 30px; line-height: 30px; padding: 0 20px; background: red; }
#topnav ul li a:hover { background: yellow; }

HTML：

<div id="topnav">
    <ul>
        <li><a href=""><span>home</span></a></li>
        <li><a href=""><span>about</span></a></li>        
        <li><a href=""><span>services</span></a></li>
        <li><a href=""><span>contact</span></a></li>
    </ul>
</div>

Answer 1

我没有IE6来测试，但是在样式菜单时，将所有样式放在A标记上，而不是LI（float:left除外 - 所以移动边框到A），制作A display:block，这可能会解决问题。

正如米克科所说，清除你的花车：

<div id="topnav">
    <ul>
        <li><a href=""><span>home</span></a></li>
        <li><a href=""><span>about</span></a></li>        
        <li><a href=""><span>services</span></a></li>
        <li><a href=""><span>contact</span></a></li>
    </ul>
    <div style="clear:both"></div>
</div>

Answer 2

如果您需要支持IE6，则必须了解haslayout。

将zoom:1添加到#topnav ul并为其提供haslayout并清除浮动广告。

Answer 3

我想我找到了你的问题 - 你使用IE6。如果IE6是动物，它将被带到外面拍摄。

笑话：IE6支持溢出隐藏IS，令人惊讶。

你真正的问题是你的UL没有相对定位。试试这个：

ul {position:relative;}

为什么不溢出：隐藏在IE6中工作？

3 个答案: