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>
珍惜时间,努力工作,热爱美好生活。