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)

 

 

posted on 2010-08-19 23:21  小炒花生米  阅读(990)  评论(0编辑  收藏  举报