[IMG][IE6/7] 圖像標籤跨瀏覽器解析：圖像下方產生間隙 1. 相異瀏覽器2. 問題描述2.1 圖片無置於表格中測試2.2 圖片置於表格中測試3. 解決方法3.1 變更vertiical-align的值3.2 改變區塊屬性圖像下方產生間隙 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顯示→下方有空隙 [IMG]http://i556.photobucket.com/albums/ss1/whc915/img-ie6.jpg[/IMG] 其他瀏覽器顯示→下方無空隙 [IMG]http://i556.photobucket.com/albums/ss1/whc915/img-g.jpg[/IMG] 完整HTML程式碼： 圖像下方產生間隙 h1 { background-color: #E20B34; } CSS程式碼 h1{background-color: #E20B34;} [hr] 範例二 以HTML4.01撰寫的DOCTYPE 宣告方式撰寫html 範例網址：http://mepopedia.com/~jinjin/cb/img-01-1-h4.html 無論哪一個版本的瀏覽器：IE6、IE7、IE8、googleChrome、FireFox，圖像下方皆會產生間隙 [hr] 範例三 以html5撰寫的DOCTYPE 宣告方式撰寫html 範例網址：http://mepopedia.com/~jinjin/cb/img-01-1-h5.html [IMG]http://i556.photobucket.com/albums/ss1/whc915/img-ie8-h5.jpg[/IMG] 無論哪一個版本的瀏覽器：IE6、IE7、IE8、googleChrome、FireFox，圖像下方皆會產生間隙 僅html5撰寫的DOCTYPE 宣告語法 [hr] 2. 圖片置於表格中測試 範例四 以XHTML1.0的DOCTYPE 宣告方式撰寫html 範例網址：http://mepopedia.com/~jinjin/cb/img-table-1.html [IMG]http://i556.photobucket.com/albums/ss1/whc915/img-table-ie6.jpg[/IMG] 圖像顯示與無放置表格中的結果不同 則無論哪一個版本的瀏覽器都沒有下方間隙的問題 完整圖像放置於表格中之XHTML1.0的DOCTYPE 宣告方式撰寫html 圖片置入表格中 td { background-color: #E7134D; } [hr] 範例五 以HTML4.01的DOCTYPE 宣告方式撰寫html 範例網址：http://mepopedia.com/~jinjin/cb/img-table-1-h4.html IE6及IE7圖片下方皆無空隙 而其他版本：IE8、googleChrome、FireFox，圖像下方則接產生空隙 HTML4.01的DOCTYPE 宣告方式 [hr] 範例六 以HTML5的!DOCTYPE 宣告方式撰寫html 範例網址：http://mepopedia.com/~jinjin/cb/img-table-2.html [IMG]http://i556.photobucket.com/albums/ss1/whc915/img-table-gc.jpg[/IMG] 則與無放置表格的結果也很不一樣 IE6及IE7圖片下方皆無空隙 而其他版本：IE8、googleChrome、FireFox，圖像下方則接產生空隙 HTML5的!DOCTYPE 宣告方式 [hr] 彙整以上六個針對圖片有無放置於表格以及不同ＤＯＣＴＹＰＥ宣告的範例，整理以下表格 [IMG]http://i556.photobucket.com/albums/ss1/whc915/img-table-1.jpg[/IMG] [hr] 3. 解決方法 這個間隙其實是為了能讓文字在基準線 「baseline」之下的部分也能完整顯示而保留的區域─「descender」。在英文字母中，像「g」和「j」這些字母會超出基準線的下方，而用來顯示這個超出之部分的區域，在此就變成了間隙。 1. 變更vertiical-align的值 只要將vertiical-align屬性的值，從起始值的「baseline」變更為對齊該行整理下方的「bottom」即可。由於vertiical-align是行內元素中可直接設定的屬性，因此只要以img元素為套用對象，設定「vertiical-align:bottom;」，則圖像下方的間隙就會消失。 HTML程式碼： CSS程式碼 h1{background-color: #E20B34;} img{vertiical-align:bottom;} 範例網址：http://mepopedia.com/~jinjin/cb/img-01-v.html 修改過後 IE6及IE7顯示→下方無空隙 [IMG]http://i556.photobucket.com/albums/ss1/whc915/img-bottom.jpg[/IMG] [hr] 2. 改變區塊屬性 由於vertiical-align屬性是設定行內元素(以及th元素及td元素)之垂直位置的屬性，所以不會影響區塊層級元素。因此在img元素中設定「display:block;」的話，圖像下方就不會出現間隙了。 HTML程式碼： CSS程式碼 h1{background-color: #E20B34;} img{display: block;} 範例網址：http://mepopedia.com/~jinjin/cb/img-01-b.html 修改過後 IE6及IE7顯示→下方無空隙 [hr] 參考文章： 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 http://mepopedia.com/forum/read.php?844,20008,20008#msg-20008 Tue, 25 Aug 2026 12:52:37 +0800 Phorum 5.2.7 http://mepopedia.com/forum/read.php?844,20008,20034#msg-20034 Re: 圖像標籤img的跨瀏覽器案例解析：圖像下方產生間隙 http://mepopedia.com/forum/read.php?844,20008,20034#msg-20034
如果是用 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/]]> HP 跨瀏覽器相容性網頁設計 Mon, 13 Feb 2012 16:09:22 +0800 http://mepopedia.com/forum/read.php?844,20008,20009#msg-20009 Re: 圖像標籤（img）的跨瀏覽器案例解析：圖像下方產生間隙 http://mepopedia.com/forum/read.php?844,20008,20009#msg-20009
http://mepopedia.com/forum/read.php?804,17462

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

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

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

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

最後，這個問題應該是和「圖片（或圖像）標籤」有關，而不是「圖像屬性」。]]> HP 跨瀏覽器相容性網頁設計 Fri, 10 Feb 2012 19:44:02 +0800 http://mepopedia.com/forum/read.php?844,20008,20008#msg-20008 [IMG][IE6/7] 圖像標籤跨瀏覽器解析：圖像下方產生間隙 http://mepopedia.com/forum/read.php?844,20008,20008#msg-20008
  1. 1. 相異瀏覽器
  2. 2. 問題描述
  3. 2.1 圖片無置於表格中測試
  4. 2.2 圖片置於表格中測試
  5. 3. 解決方法
  6. 3.1 變更vertiical-align的值
  7. 3.2 改變區塊屬性
圖像下方產生間隙

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顯示→下方有空隙

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

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

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


完整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;}
[hr]

範例二

以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">
[hr]

範例三

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

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

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

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

僅html5撰寫的DOCTYPE 宣告語法

<!DOCTYPE html>
[hr]

2. 圖片置於表格中測試



範例四

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

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

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

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

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


完整圖像放置於表格中之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>
[hr]

範例五

以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">
[hr]

範例六

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

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

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

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

IE6及IE7圖片下方皆無空隙

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

HTML5的!DOCTYPE 宣告方式

<!DOCTYPE html>
[hr]

彙整以上六個針對圖片有無放置於表格以及不同ＤＯＣＴＹＰＥ宣告的範例，整理以下表格

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

[hr]

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顯示→下方無空隙

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

[hr]

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顯示→下方無空隙


[hr]

參考文章：
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]]> JinJin 跨瀏覽器相容性網頁設計 Fri, 10 Feb 2012 09:20:15 +0800