IE6 5px 3px Bug
时间：2010-08-19 来源：小炒花生米
IE6中img下部多出5px的空白解决4种方法
2010-01-09 下午 05:47
|
在IE6中 如果li元素中包含 a img 元素是后下部会出现5px的空白。当然需要这个空白时最好的。可是不需要这个空白的时候就麻烦了。怎么将它去掉呢？ 请看下面： 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;
width:277px;
}
其中 temp.jpg 尺寸为 277×57
Firefox 下的正常表现： 解决方法 一使 li 浮动，并设置 img 为块级元素 ul{
width: 280px;
}
ul li{
float:left;
display:block;
width:277px;
}
img{
display: block;
}
解决方法 二设置 ul 的 font-size:0; ul{
width: 280px;
font-size: 0;
}
ul li{
display:block;
width:277px;
}
解决方法 三设置 img 的 vertical-align: bottom; ul{
width: 280px;
font-size: 0;
}
ul li{
display:block;
width:277px;
}
img{
vertical-align:bottom;
}
解决方法 四设置 img 的 margin-bottom: -5px; ul{
width: 280px;
font-size: 0;
}
ul li{
display:block;
width:277px;
}
img{
margin-bottom: -5px;
}
个人觉得如果让浏览器通用的话可以用第一种方法，而要是针对IE6的话可以用第四种方法。
如果你有什么建议记得要提哦！ |
转自：http://hi.baidu.com/wgqi1126/blog/item/50c35c76929dfc10b051b98f.html
http://hi.baidu.com/wgqi1126/blog/item/50c35c76929dfc10b051b98f.html（5px）
http://dahuairen.cn/article/T/4.htm（3px）
相关阅读 更多 +
