img標籤下多餘空白BUG解決方法

在進行頁面的DIV CSS排版時，遇到IE6（固然有時Firefox下也會偶遇）瀏覽器中的圖片元素img下出現多餘空白的問題絕對是常見的

對於該問題的解決方法也是「見機行事」。

一、將圖片轉換爲塊級對象

即，設置img爲「display:block;」。在本例中添加一組CSS代碼：「#sub img {display:block;}」。

二、設置圖片的垂直對齊方式

即設置圖片的vertical-align屬性爲「top，text-top，bottom，text-bottom」也能夠解決。如本例中增長一組CSS代碼：「#sub img {vertical-align:top;}」。

三、設置父對象的文字大小爲0px

即，在#sub中添加一行：「font-size:0;」能夠解決問題。但這也引起了新的問題，在父對象中的文字都沒法顯示。

就算文字部分被子對象括起來，設置子對象文字大小依然能夠顯示，但在CSS效驗的時候會提示文字太小的錯誤。

四、改變父對象的屬性

若是父對象的寬、高固定，圖片大小隨父對象而定，那麼能夠設置「overflow:hidden;」來解決。

如本例中能夠向#sub中添加如下代碼：「width:88px;height:31px;overflow:hidden;」。

五、設置圖片的浮動屬性

即在本例中增長一行CSS代碼：「#sub img {float:left;}」。若是要實現圖文混排，這種方法是很好的選擇。

六、取消圖片標籤和其父對象的最後一個結束標籤之間的空格