Welcome! 登入 註冊
專區首頁 專區百科 專區論壇 專區部落格 專區地圖

Advanced

Re: 圖像標籤(img)的跨瀏覽器案例解析:圖像下方產生間隙

圖像下方產生間隙

1. 相異瀏覽器


IE6、IE7

2. 問題描述


在img元素的父元素中,試著顯示出背景或border時,會發現img元素之下,會產生一道小小的間隙。這並非瀏覽器的bug,而是依照CSS的規格,vertiical-align的起始值為 「baseline」,因此圖像下方會對齊「baseline」的位置而產生此現象。

1. 圖片無置於表格中測試



範例一

以XHTML1.0撰寫的DOCTYPE 宣告方式撰寫html

範例網址:http://mepopedia.com/~jinjin/cb/img-01-1.html

IE6及IE7顯示→下方有空隙

http://i556.photobucket.com/albums/ss1/whc915/img-ie6.jpg

其他瀏覽器顯示→下方無空隙

http://i556.photobucket.com/albums/ss1/whc915/img-g.jpg


完整HTML程式碼:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>圖像下方產生間隙</title> <style type="text/css"> h1 { background-color: #E20B34; } </style> </head> <body> <h1> <img src="img-01.jpg"/> </h1> </body> </html>
CSS程式碼
h1{background-color: #E20B34;}



範例二

以HTML4.01撰寫的DOCTYPE 宣告方式撰寫html

範例網址:http://mepopedia.com/~jinjin/cb/img-01-1-h4.html

無論哪一個版本的瀏覽器:IE6、IE7、IE8、googleChrome、FireFox,圖像下方皆會產生間隙

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">



範例三

以html5撰寫的DOCTYPE 宣告方式撰寫html

範例網址:http://mepopedia.com/~jinjin/cb/img-01-1-h5.html

http://i556.photobucket.com/albums/ss1/whc915/img-ie8-h5.jpg

無論哪一個版本的瀏覽器:IE6、IE7、IE8、googleChrome、FireFox,圖像下方皆會產生間隙

僅html5撰寫的DOCTYPE 宣告語法

<!DOCTYPE html>



2. 圖片置於表格中測試



範例四

以XHTML1.0的DOCTYPE 宣告方式撰寫html

範例網址:http://mepopedia.com/~jinjin/cb/img-table-1.html

http://i556.photobucket.com/albums/ss1/whc915/img-table-ie6.jpg

圖像顯示與無放置表格中的結果不同

則無論哪一個版本的瀏覽器都沒有下方間隙的問題


完整圖像放置於表格中之XHTML1.0的DOCTYPE 宣告方式撰寫html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>圖片置入表格中</title> <style type="text/css"> td { background-color: #E7134D; } </style> </head> <body> <table width="100%" border="0"> <tr> <td><img src="img-02.jpg" width="600" height="400" /></td> </tr> </table> </body> </html>



範例五

以HTML4.01的DOCTYPE 宣告方式撰寫html

範例網址:http://mepopedia.com/~jinjin/cb/img-table-1-h4.html

IE6及IE7圖片下方皆無空隙

而其他版本:IE8、googleChrome、FireFox,圖像下方則接產生空隙

HTML4.01的DOCTYPE 宣告方式

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">



範例六

以HTML5的!DOCTYPE 宣告方式撰寫html

範例網址:http://mepopedia.com/~jinjin/cb/img-table-2.html

http://i556.photobucket.com/albums/ss1/whc915/img-table-gc.jpg

則與無放置表格的結果也很不一樣

IE6及IE7圖片下方皆無空隙

而其他版本:IE8、googleChrome、FireFox,圖像下方則接產生空隙

HTML5的!DOCTYPE 宣告方式

<!DOCTYPE html>



彙整以上六個針對圖片有無放置於表格以及不同DOCTYPE宣告的範例,整理以下表格

http://i556.photobucket.com/albums/ss1/whc915/img-table-1.jpg




3. 解決方法


這個間隙其實是為了能讓文字在基準線 「baseline」之下的部分也能完整顯示而保留的區域─「descender」。在英文字母中,像「g」和「j」這些字母會超出基準線的下方,而用來顯示這個超出之部分的區域,在此就變成了間隙。

1. 變更vertiical-align的值


只要將vertiical-align屬性的值,從起始值的「baseline」變更為對齊該行整理下方的「bottom」即可。由於vertiical-align是行內元素中可直接設定的屬性,因此只要以img元素為套用對象,設定「vertiical-align:bottom;」,則圖像下方的間隙就會消失。

HTML程式碼:
<h1> <img scr"img-01.jpg"/> </h1>
CSS程式碼
h1{background-color: #E20B34;} img{vertiical-align:bottom;}
範例網址:http://mepopedia.com/~jinjin/cb/img-01-v.html
修改過後
IE6及IE7顯示→下方無空隙

http://i556.photobucket.com/albums/ss1/whc915/img-bottom.jpg



2. 改變區塊屬性


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

HTML程式碼:
<h1> <img scr"img-01.jpg"/> </h1>
CSS程式碼
h1{background-color: #E20B34;} img{display: block;}
範例網址:http://mepopedia.com/~jinjin/cb/img-01-b.html
修改過後
IE6及IE7顯示→下方無空隙





參考文章:
http://www.dotblogs.com.tw/jasonyang/archive/2011/04/19/23108.aspx
http://www.seohouse.org/web-design-css-the-common-solution-to-the-problem.html
XHTML+CSS虎之卷,旗標出版社,大藤幹著,p.163-164



Edited 17 time(s). Last edit at 03/01/2012 08:49PM by mepoadm.
(編輯記錄)

MEPOERs said:
HP: 「圖片下方空隙」可能不單是個跨瀏覽器問題,也有「瀏覽器相通」的部份。例如這個網頁 footer 圖片下方就有「空隙」:http://mepopedia.com/~web100a/hw04/hw04-1001445068/
這個問題也可以參考下面這篇文章的解說:

http://mepopedia.com/forum/read.php?804,17462

另外,如果這個問題和「跨瀏覽器」有關的話,建議也請說明這個問題在不同瀏覽器上不同的地方。如此對這個問題可以有更深入的了解。同時,如果和「跨瀏覽器」沒有關係會話,可能也不用強調這個問題是屬於跨瀏覽器的問題。

目前有一個可以觀察的例子是這個頁面(六~七世紀漢語文化圈的印度佛教思潮-國科會哲學學門人才培育計畫):

http://buddhica.nccu.edu.tw/

這個頁面 (或網站) 在 IE 瀏覽器中 (應該是 IE6~IE8 都有) 有水平導覽列圖片下方有空隙的問題,而在其他瀏覽器中似乎就沒有。我想這可能是個可以著手的地方。當然,這個空隙問題也不一定是和圖片標籤有關。這一點就需要進一步的分析。

最後,這個問題應該是和「圖片(或圖像)標籤」有關,而不是「圖像屬性」。



Edited 2 time(s). Last edit at 02/10/2012 08:33PM by HP.
(編輯記錄)

經過許久的調查後發現,原來問題差異是在「Doctype] 的宣告上。

如果是用 standard 的宣告,則只有在 IE 舊瀏覽器上會有問題,如果宣告成「HTML5」,則在幾乎所有的瀏覽器上會有「圖片下方空隙」的問題。

可參考以下網頁的「Almost standards mode」:

http://en.wikipedia.org/wiki/Quirks_mode#Almost_standards_mode


另外,底下這個文章也有提及相關問題(此文主要是介紹「DOCTYPE」):

http://www.fantxi.com/blog/archives/browser-mode/