ie img 3px bug

ie img 3px bug

日期：2008-11-22 分类：CSS

ie img 有 3px 的缝隙也是 ie 的经典 bug 之一，相信已经不陌生了，但还是先看看效果吧（也许你并没有见过）：

效果1 效果2

效果1 图片下方有缝隙，这是最常见的；效果2 则不但下面有，右边也有，并且在 FF 和 opera 里，下方也有缝隙。这是因为效果2 图片的父元素是内联元素。

这个缝隙的大小网上说是 3px ，其实在 ie 里是 4px （你可以设置图片父元素的负 margin 测试），而效果2 在 FF 里下方有 3px 的缝隙，在 opera 里下方有 2px 的缝隙。

这个小缝隙在有些情况并不会造成太大的影响，不修复也没有关系；但如果对有些情况影响较大，那就不得不修复了。修复方法有很多：

1、改变XHTML排版，让 img 的后面紧跟标签（若没有文字的话），如：

<div><img src="" alt="" /></div>

而不是：

<div>

<img src="" alt="" />

<div>

2、为 img 设置 display:block ；

3、为父元素设置 font-size:0 ；

4、为 img 设置 vertical-align 属性，值可以是: top|bottom|text-top|text-bottom （其他值效果不好或没有效果）。

但是：

如果图片的父元素是内联元素的话，选择第 3 种方法，在 ie 里右边仍有 1px 的缝隙，而在 opera 里下方仍有 2px 的缝隙，请用相应的浏览器查看下面的效果：

查看效果

如果图片的父元素是内联元素的话，选择第 4 种方法，在 ie 里只能修复下方的缝隙，而右边的缝隙则不能修复。看效果：

查看效果

如果图片的父元素是块级元素的话，上面 4 种方法都能完全修复此 bug 。但为了保险，选择第1 、第2 种方法更妥当。