|
Re: 圖像標籤img的跨瀏覽器案例解析：圖像下方產生間隙
|
[IMG][IE6/7] 圖像標籤跨瀏覽器解析：圖像下方產生間隙 |
Moderator February 10, 2012 09:20AM 發表文章數: 1,229 |
圖像下方產生間隙
IE6、IE7
在img元素的父元素中，試著顯示出背景或border時，會發現img元素之下，會產生一道小小的間隙。這並非瀏覽器的bug，而是依照CSS的規格，vertiical-align的起始值為 「baseline」，因此圖像下方會對齊「baseline」的位置而產生此現象。
範例一
以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]
範例四
以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]
這個間隙其實是為了能讓文字在基準線 「baseline」之下的部分也能完整顯示而保留的區域─「descender」。在英文字母中，像「g」和「j」這些字母會超出基準線的下方，而用來顯示這個超出之部分的區域，在此就變成了間隙。
只要將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]
由於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
MEPOERs said:
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程式碼：
CSS程式碼
[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
[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程式碼
範例網址：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程式碼
範例網址：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
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/
|
Re: 圖像標籤（img）的跨瀏覽器案例解析：圖像下方產生間隙 |
Moderator February 10, 2012 07:44PM 發表文章數: 1,006 |
這個問題也可以參考下面這篇文章的解說：
http://mepopedia.com/forum/read.php?804,17462
另外，如果這個問題和「跨瀏覽器」有關的話，建議也請說明這個問題在不同瀏覽器上不同的地方。如此對這個問題可以有更深入的了解。同時，如果和「跨瀏覽器」沒有關係會話，可能也不用強調這個問題是屬於跨瀏覽器的問題。
目前有一個可以觀察的例子是這個頁面(六～七世紀漢語文化圈的印度佛教思潮－國科會哲學學門人才培育計畫)：
http://buddhica.nccu.edu.tw/
這個頁面 (或網站) 在 IE 瀏覽器中 (應該是 IE6~IE8 都有) 有水平導覽列圖片下方有空隙的問題，而在其他瀏覽器中似乎就沒有。我想這可能是個可以著手的地方。當然，這個空隙問題也不一定是和圖片標籤有關。這一點就需要進一步的分析。
最後，這個問題應該是和「圖片（或圖像）標籤」有關，而不是「圖像屬性」。
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.
(編輯記錄)
|
Re: 圖像標籤img的跨瀏覽器案例解析：圖像下方產生間隙 |
Moderator February 13, 2012 04:09PM 發表文章數: 1,006 |
經過許久的調查後發現，原來問題差異是在「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/
如果是用 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/
MEPO forum
is powered by Phorum.