html - 为什么不溢出 :hidden working in IE6?

Question

请看这个:

http://jsfiddle.net/UQNJA/1/

它在所有现代浏览器甚至 IE7/8 和 9 中看起来都不错。但在 IE6 中，红色和粉红色边框不包含 <li>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，就必须了解haslayout .

将 zoom:1 添加到 #topnav ul 并为其提供 haslayout 并清除 float 。