IE 6 中，li 浮动了，ul 没高度的问题

作者：vkvi 来源：ITPOW（原创）日期：2012-4-12

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<style type="text/css">
ul{margin:0px;padding:0px;overflow:auto;border-bottom:1px solid red;}
ul li{float:left;margin:0px;padding:0px;list-style-type:none;}
</style>
</head>
<body>

<ul>
  <li>www.itpow.com</li>
  <li>www.itpow.com</li>
</ul>

</body>

</html>

如上代码，li 浮动了，但是在 IE 6 中，ul 的 border-bottom 在顶端，说明 ul 高度没有被 li 撑开，其他浏览器则不。

解决办法：给 ul 增加 zoom:1，如下：

ul{margin:0px;padding:0px;zoom:1;overflow:auto;border-bottom:1px solid red;}
ul li{float:left;margin:0px;padding:0px;list-style-type:none;}

结论

子元素浮动了，外层元素应该设置 overflow:auto 或 overflow:hidden，以使它的高度适应子元素的高度。

但是在 IE 6 中，遇到 li 浮动时，ul 应该设置 zoom:1。

电邮：cftea@126.com