贰陆的博客

当Li中出现a img元素时，会出现img下有5px空白的情况，仅在该死的IE下是这样

HTML代码：

<ul>  <li><a href="#"><img src="img/temp.jpg" alt="" /></a></li>  <li><a href="#"><img src="img/temp.jpg" alt="" /></a></li>  <li><a href="#"><img src="img/temp.jpg" alt="" /></a></li>  <li><a href="#"><img src="img/temp.jpg" alt="" /></a></li> </ul>

CSS代码：

ul{  width: 280px; } ul li{  display:block;  height:57px;  width:277px; }

其中，img的尺寸为277px*57px 可以看到，在Firefox下一切正常

而在IE下，情况变了：

解决方法 一
使 li 浮动，并设置 img 为块级元素

ul{  width: 280px; } ul li{  float:left;  display:block;  height:57px;  width:277px; } img{  display: block; }

解决方法 二
设置 ul 的 font-size:0;

ul{  width: 280px;  font-size: 0; } ul li{  display:block;  height:57px;  width:277px; }

解决方法 三
设置 img 的 vertical-align: bottom;

ul{  width: 280px;  font-size: 0; } ul li{  display:block;  height:57px;  width:277px; } img{  vertical-align:bottom; }

解决方法 四
设置 img 的 margin-bottom: -5px;

ul{  width: 280px;  font-size: 0; } ul li{  display:block;  height:57px;  width:277px; } img{  margin-bottom: -5px; }

标签：5px空白, CSS Hack, IE

Posted in 开发 |