IE bug —— 图片的3px bug

极度变态。以前我一直回避这类问题，因为实在是令人感到莫名其妙。今天又遇到了，google了一下，把它解决好了。唉。

=====================抄书的分割线===================

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 属性，值可以是: topbottomtext-toptext-bottom （其他值效果不好或没有效果）。

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

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

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

原文出处