【CSS】圖像產生間隙,空一行,如何解決?完美解決跨瀏覽器兼容教學





【CSS】圖像產生間隙,空一行,如何解決?完美解決跨瀏覽器兼容教學-min

在 img 元素的父元素中,試著顯示出背景或 border 時,發現 img 元素之下,會產生一道小小的間隙,紅框處這並非瀏覽器的 bug,而是依照 CSS 的規格,vertiical-align的起始值為 「 baseline 」,因此圖像下方會對齊「 baseline 」的位置而產生此現象。我們在使用IE6、IE7、IE8、googleChrome、FireFox瀏覽器時,有時候加入圖片CSS下方會產生一些間隙和空一行,那要如何解決呢?來教大家如何解決跨瀏覽器兼容這些問題!


解決方式


方法一:更變vertical-align的質

只要將vertiical-align屬性的值,從起始值的「baseline」變更為對齊該行整理下方的「bottom」即可。由於vertiical-align是行內元素中可直接設定的屬性,因此只要以img元素為套用對象,設定「vertiical-align:bottom;」,則圖像下方的間隙就會消失。
HTML程式碼:
< h1 >
< img scr "PKstep.jpg " />
< / h1 >
CSS程式碼
h1 { background-color: #FFFFFF;}
img { vertiical - align: bottom;}



方法二:改變區塊屬性

由於vertiical-align屬性是設定行內元素(以及th元素及td元素)之垂直位置的屬性,所以不會影響區塊層級元素。因此在img元素中設定「display:block;」的話,圖像下方就不會出現間隙了。
HTML程式碼:
< h1 >
< img scr " PKstep.jpg " />
< / h1 >
CSS程式碼

h1 { background-color: #FFFFFF;}
img { display:block;}



實用教學延伸閱讀






相關文章