ie img 3px bug
日期：2008-11-22 分類：CSS
ie img 有 3px 的縫隙也是 ie 的經典 bug 之一，相信已經不陌生了，但還是先看看效果吧（也許你並沒有見過）：
效果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>
<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 種方法更妥當。