解决使用了float后IE6下li高度比Firefox或者IE8高的问题

内容摘要
这两天做页面模板，有些li使用了float:left，结果发现行高在IE6下与其他浏览器不同了，总要高出一些。查了一下，发现这个是因为IE下特有的hasLayout造成的，很
文章正文

这两天做页面模板，有些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复制内容到剪贴板
  1. <style>  
  2. ul {   
  3.     margin:0;   
  4.     padding:10px;   
  5.     list-style:none;   
  6.     background-color:#006699;   
  7.     zoom:1;   
  8. }   
  9. ul li {   
  10.     width:100px;   
  11.     height:100px;   
  12.     float:left;   
  13.     margin-right:10px;   
  14.     background-color:#99cc00;   
  15. }   
  16. </style>  
  17. <ul>  
  18.     <li>西部e网-IT资讯</li>  
  19.     <li>西部e网-软件教程</li>  
  20. </ul>  

在ul的样式表中增加了zoom:1就ok了。

方法2：

HTML/XML Code复制内容到剪贴板
  1. <style>  
  2. ul {   
  3.     margin:0;   
  4.     padding:10px;   
  5.     list-style:none;   
  6.     background-color:#006699;   
  7.     zoom:1;   
  8. }   
  9. * html ul {   
  10.     height:1%;   
  11. }   
  12. ul li {   
  13.     width:100px;   
  14.     height:100px;   
  15.     float:left;   
  16.     margin-right:10px;   
  17.     background-color:#99cc00;   
  18. }   
  19. </style>  
  20. <ul>  
  21.     <li>西部e网-IT资讯</li>  
  22.     <li>西部e网-软件教程</li>  
  23. </ul>  

小知识：什么是haslayout？

haslayout 是Windows Internet Explorer渲染引擎的一个内部组成部分。在InternetExplorer中，一个元素要么自己对自身的内容进行计算大小和组织，要么依赖于父元素来计算尺寸和组织内容。为了调节这两个不同的概念，渲染引擎采用了 hasLayout 的属性，属性值可以为true或false。当一个元素的 hasLayout属性值为true时，我们说这个元素有一个布局（layout）。
代码注释
[!--zhushi--]
上一篇jenny：我不是一个简单的web UI下一篇Web前端应用十种常用技术

作者：喵哥笔记

IDC笔记

学的不仅是技术，更是梦想！