圖片img與div容器下有間隔的解決方法

問題描述：

IE7下 img與div（block類型元素）下邊界有距離（或者叫縫隙、空隙）。

IE7纔會有這個問題，IE8下是沒有的。

解決方案：

法寶一：定義圖片img標籤vertical-align:bottom，vertical-align:middle，vertical-align:top。

img{vertical-align:bottom;} 

法寶二：定義容器裏的字體大小爲0。

div {
width:110px;
border:1px solid #000000;
font-size:0
}

據說原因：

圖片文字等inline元素默認是和父級元素的baseline對齊的，而baseline又和父級底邊有一定距離（這個距離和 font-size，font-family 相關），所以設置 vertical-align:top/bottom/text-top/text-bottom 都可以避免這種情況出現。而且不光li，其他的block元素中包含img也會有這個現象。