这两天做页面模板，有些li使用了float:left，结果发现行高在IE6下与其他浏览器不同了，总要高出一些。查了一下，发现这个是因为IE下特有的hasLayout造成的，很多的IE下的CSS BUG都其有关。
代码如下：
<style>
ul {
margin:0;
padding:10px;
list-style:none;
background-color:#006699;
}
ul li {
width:100px;
height:100px;
float:left;
margin-right:10px;
background-color:#99cc00;
}
</style>
<ul>
<li>西部e网-IT资讯</li>
<li>西部e网-软件教程</li>
</ul>
如何解决这个问题呢？其实很简单，而且也有多种方法：
方法1：使用zoom:1
折叠HTML/XML Code复制内容到剪贴板
- <style>
- ul {
- margin:0;
- padding:10px;
- list-style:none;
- background-color:#006699;
- zoom:1;
- }
- ul li {
- width:100px;
- height:100px;
- float:left;
- margin-right:10px;
- background-color:#99cc00;
- }
- </style>
- <ul>
- <li>西部e网-IT资讯</li>
- <li>西部e网-软件教程</li>
- </ul>
在ul的样式表中增加了zoom:1就ok了。
方法2：
HTML/XML Code复制内容到剪贴板
- <style>
- ul {
- margin:0;
- padding:10px;
- list-style:none;
- background-color:#006699;
- zoom:1;
- }
- * html ul {
- height:1%;
- }
- ul li {
- width:100px;
- height:100px;
- float:left;
- margin-right:10px;
- background-color:#99cc00;
- }
- </style>
- <ul>
- <li>西部e网-IT资讯</li>
- <li>西部e网-软件教程</li>
- </ul>
小知识：什么是haslayout？
haslayout 是Windows Internet Explorer渲染引擎的一个内部组成部分。在InternetExplorer中，一个元素要么自己对自身的内容进行计算大小和组织，要么依赖于父元素来计算尺寸和组织内容。为了调节这两个不同的概念，渲染引擎采用了 hasLayout 的属性，属性值可以为true或false。当一个元素的 hasLayout属性值为true时，我们说这个元素有一个布局（layout）。