IE6下img多余5像素空白
2010-07-20 11:21
337 查看
代码
<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>
ul{
width: 280px;
}
ul li{
display:block;
height:57px;
width:277px;
}
其中 temp.jpg 尺寸为 277×57
Firefox 下的正常表现:
IE6 下的非正常表现:
很明显地可以看到 IE 中,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;
}
具体参见:无序列表ul在IE6、IE7中下边距bug
相关文章推荐
- IE6下ul li a img下,img下面多余5像素空白的bug
- 解决 IE6 下 img 多余 5 个像素的空白
- 解决 IE6 下 img 多余 5 个像素的空白
- IE6 验证码图片 元素img下出现多余空白问题
- IE下img多余5像素空白解决方法
- IE6图片元素img下出现多余空白问题
- 在进行页面的DIV CSS排版时,遇到IE6(当然有时Firefox下也会偶遇)浏览器中的图片元素img下出现多余空白的问题绝对是常见的对于该问题的解决方法也是“见机行事”。
- 图片元素img在IE6下出现多余空白问题
- IE6 中的图片元素 img 图片布局下出现多余空白的问题
- IE6图片元素img下出现多余空白问题
- IE6图片元素img下出现多余空白的问题
- 【转载】IE6 BUG 图片元素img下 高度超出 出现多余空白
- IE6 验证码图片 元素img下出现多余空白问题
- IE6中的图片元素img下出现多余空白BUG
- IE6图片元素img下出现多余空白的问题
- IE下img多余5像素空白
- IE img多余5像素空白解决方法
- IE6下 li有多余空白其实就是ul的padding-top值被li继承了
- img标签下多余空白BUG解决方法 / div / img / 图片 / 空格
- div包裹img底边会有几个像素的空白的问题