IE6's Bug系列之li底部多余间距

一、问题如下所示:

 1 <style type="text/css">
 2 
 3 ul{ width:400px;
 4     margin:100px 200px;}
 5 li{ list-style:none;}   
 6 li a{ display:block;
 7        background:#000;
 8        color:#fff;
 9        text-decoration:none;}
10 li a:hover{ background: #990000;}      
11          
12    
13 </style>
14 
15 
16 
17 <ul>
18   <li><a href="#">第1条连接</a></li>
19   <li><a href="#">第2条连接</a></li>
20   <li><a href="#">第3条连接</a></li>
21 </ul>

在常规浏览器中,显示正常,在ie6中每行li底部会有多余的空白间距,相当于每行li都多了几像素的padding-bottom。

二、解决方法:

(1)为a元素添加样式{zoom:1};

(2)将html部分改写成如下格式(不推荐!!)

<ul>
  <li><a href="#">第1条连接</a></li><li><a href="#">第2条连接</a></li><li><a href="#">第3条连接</a></li>
</ul>
posted @ 2012-10-07 22:28  游不停的鱼  阅读(170)  评论(0编辑  收藏  举报