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;
height:57px;
width:277px;
}
其中 temp.jpg 尺寸为 277×57
Firefox 下的正常表现: IE6 下的非正常表现: 很明显地可以看到 IE6 中,li 的表现高度,并非我们设定的 57px,而是比其要高,这是因为 img 下面多出了 5px 的空白。
解决方法 一
使 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;
}
个人觉得如果让浏览器通用的话可以用第一种方法,而要是针对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)