Change History
Message: [IMG][IE6/7] 圖像標籤跨瀏覽器解析：圖像下方產生間隙
Changed By: mepoadm
Change Date: March 01, 2012 08:49PM
[IMG][IE6/7] 圖像標籤的跨瀏覽器案例跨瀏覽器解析：圖像下方產生間隙
Change Date: March 01, 2012 08:49PM
[IMG][IE6/7] 圖像標籤的跨瀏覽器案例跨瀏覽器解析：圖像下方產生間隙
圖像下方產生間隙
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"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br />
<title>圖像下方產生間隙</title><br />
<style type="text/css"><br />
h1 {<br />
background-color: #E20B34;<br />
}<br />
</style><br />
</head><br />
<br />
<body><br />
<h1><br />
<img src="img-01.jpg"/><br />
</h1><br />
</body><br />
</html><br />
CSS程式碼
h1{background-color: #E20B34;}<br />
[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"><br />
[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><br />
[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"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br />
<title>圖片置入表格中</title><br />
<style type="text/css"><br />
td {<br />
background-color: #E7134D;<br />
}<br />
</style><br />
</head><br />
<br />
<body><br />
<table width="100%" border="0"><br />
<tr><br />
<td><img src="img-02.jpg" width="600" height="400" /></td><br />
</tr><br />
</table><br />
</body><br />
</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><br />
<img scr"img-01.jpg"/><br />
</h1>
CSS程式碼
h1{background-color: #E20B34;}<br />
img{vertiical-align:bottom;} <br />
範例網址：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><br />
<img scr"img-01.jpg"/><br />
</h1>
CSS程式碼
h1{background-color: #E20B34;}<br />
img{display: block;} <br />
範例網址：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
相異瀏覽器
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程式碼：
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]
圖片置於表格中測試
範例四
以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]
解決方法
這個間隙其實是為了能讓文字在基準線 「baseline」之下的部分也能完整顯示而保留的區域─「descender」。在英文字母中，像「g」和「j」這些字母會超出基準線的下方，而用來顯示這個超出之部分的區域，在此就變成了間隙。
變更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]
改變區塊屬性
由於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
Changed By: mepoadm
Change Date: March 01, 2012 08:47PM
[IMG][IE][Doctype] 圖像標籤的跨瀏覽器案例跨瀏覽器解析：圖像下方產生間隙
Change Date: March 01, 2012 08:47PM
[IMG][IE][Doctype] 圖像標籤的跨瀏覽器案例跨瀏覽器解析：圖像下方產生間隙
圖像下方產生間隙
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"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br />
<title>圖像下方產生間隙</title><br />
<style type="text/css"><br />
h1 {<br />
background-color: #E20B34;<br />
}<br />
</style><br />
</head><br />
<br />
<body><br />
<h1><br />
<img src="img-01.jpg"/><br />
</h1><br />
</body><br />
</html><br />
CSS程式碼
h1{background-color: #E20B34;}<br />
[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"><br />
[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><br />
[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"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br />
<title>圖片置入表格中</title><br />
<style type="text/css"><br />
td {<br />
background-color: #E7134D;<br />
}<br />
</style><br />
</head><br />
<br />
<body><br />
<table width="100%" border="0"><br />
<tr><br />
<td><img src="img-02.jpg" width="600" height="400" /></td><br />
</tr><br />
</table><br />
</body><br />
</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><br />
<img scr"img-01.jpg"/><br />
</h1>
CSS程式碼
h1{background-color: #E20B34;}<br />
img{vertiical-align:bottom;} <br />
範例網址：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><br />
<img scr"img-01.jpg"/><br />
</h1>
CSS程式碼
h1{background-color: #E20B34;}<br />
img{display: block;} <br />
範例網址：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
相異瀏覽器
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程式碼：
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]
圖片置於表格中測試
範例四
以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]
解決方法
這個間隙其實是為了能讓文字在基準線 「baseline」之下的部分也能完整顯示而保留的區域─「descender」。在英文字母中，像「g」和「j」這些字母會超出基準線的下方，而用來顯示這個超出之部分的區域，在此就變成了間隙。
變更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]
改變區塊屬性
由於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
Changed By: mepoadm
Change Date: March 01, 2012 08:46PM
[IMG][IE][Doctype] 圖像標籤img的跨瀏覽器案例跨瀏覽器解析：圖像下方產生間隙
Change Date: March 01, 2012 08:46PM
[IMG][IE][Doctype] 圖像標籤img的跨瀏覽器案例跨瀏覽器解析：圖像下方產生間隙
圖像下方產生間隙
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"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br />
<title>圖像下方產生間隙</title><br />
<style type="text/css"><br />
h1 {<br />
background-color: #E20B34;<br />
}<br />
</style><br />
</head><br />
<br />
<body><br />
<h1><br />
<img src="img-01.jpg"/><br />
</h1><br />
</body><br />
</html><br />
CSS程式碼
h1{background-color: #E20B34;}<br />
[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"><br />
[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><br />
[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"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br />
<title>圖片置入表格中</title><br />
<style type="text/css"><br />
td {<br />
background-color: #E7134D;<br />
}<br />
</style><br />
</head><br />
<br />
<body><br />
<table width="100%" border="0"><br />
<tr><br />
<td><img src="img-02.jpg" width="600" height="400" /></td><br />
</tr><br />
</table><br />
</body><br />
</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><br />
<img scr"img-01.jpg"/><br />
</h1>
CSS程式碼
h1{background-color: #E20B34;}<br />
img{vertiical-align:bottom;} <br />
範例網址：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><br />
<img scr"img-01.jpg"/><br />
</h1>
CSS程式碼
h1{background-color: #E20B34;}<br />
img{display: block;} <br />
範例網址：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
相異瀏覽器
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程式碼：
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]
圖片置於表格中測試
範例四
以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]
解決方法
這個間隙其實是為了能讓文字在基準線 「baseline」之下的部分也能完整顯示而保留的區域─「descender」。在英文字母中，像「g」和「j」這些字母會超出基準線的下方，而用來顯示這個超出之部分的區域，在此就變成了間隙。
變更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]
改變區塊屬性
由於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
Changed By: JinJin
Change Date: February 15, 2012 11:52PM
圖像標籤img的跨瀏覽器案例跨瀏覽器解析：圖像下方產生間隙
Change Date: February 15, 2012 11:52PM
圖像標籤img的跨瀏覽器案例跨瀏覽器解析：圖像下方產生間隙
Changed By: JinJin
Change Date: February 15, 2012 11:08PM
圖像標籤img的跨瀏覽器案例跨瀏覽器解析：圖像下方產生間隙
Change Date: February 15, 2012 11:08PM
圖像標籤img的跨瀏覽器案例跨瀏覽器解析：圖像下方產生間隙
Changed By: JinJin
Change Date: February 15, 2012 08:37PM
圖像標籤img的跨瀏覽器案例跨瀏覽器解析：圖像下方產生間隙
Change Date: February 15, 2012 08:37PM
圖像標籤img的跨瀏覽器案例跨瀏覽器解析：圖像下方產生間隙
Changed By: JinJin
Change Date: February 15, 2012 01:04AM
圖像標籤img的跨瀏覽器案例跨瀏覽器解析：圖像下方產生間隙
Change Date: February 15, 2012 01:04AM
圖像標籤img的跨瀏覽器案例跨瀏覽器解析：圖像下方產生間隙
Changed By: JinJin
Change Date: February 15, 2012 12:52AM
圖像標籤img的跨瀏覽器案例跨瀏覽器解析：圖像下方產生間隙
Change Date: February 15, 2012 12:52AM
圖像標籤img的跨瀏覽器案例跨瀏覽器解析：圖像下方產生間隙
Changed By: JinJin
Change Date: February 15, 2012 12:51AM
圖像標籤img的跨瀏覽器案例跨瀏覽器解析：圖像下方產生間隙
Change Date: February 15, 2012 12:51AM
圖像標籤img的跨瀏覽器案例跨瀏覽器解析：圖像下方產生間隙
Changed By: JinJin
Change Date: February 15, 2012 12:24AM
圖像標籤img的跨瀏覽器案例跨瀏覽器解析：圖像下方產生間隙
Change Date: February 15, 2012 12:24AM
圖像標籤img的跨瀏覽器案例跨瀏覽器解析：圖像下方產生間隙
Changed By: JinJin
Change Date: February 15, 2012 12:22AM
圖像標籤img的跨瀏覽器案例跨瀏覽器解析：圖像下方產生間隙
Change Date: February 15, 2012 12:22AM
圖像標籤img的跨瀏覽器案例跨瀏覽器解析：圖像下方產生間隙
Changed By: JinJin
Change Date: February 15, 2012 12:19AM
圖像標籤img的跨瀏覽器案例跨瀏覽器解析：圖像下方產生間隙
Change Date: February 15, 2012 12:19AM
圖像標籤img的跨瀏覽器案例跨瀏覽器解析：圖像下方產生間隙
Changed By: JinJin
Change Date: February 13, 2012 11:29PM
圖像標籤img的跨瀏覽器案例跨瀏覽器解析：圖像下方產生間隙
Change Date: February 13, 2012 11:29PM
圖像標籤img的跨瀏覽器案例跨瀏覽器解析：圖像下方產生間隙
Changed By: JinJin
Change Date: February 13, 2012 11:28PM
圖像標籤img的跨瀏覽器案例跨瀏覽器解析：圖像下方產生間隙
Change Date: February 13, 2012 11:28PM
圖像標籤img的跨瀏覽器案例跨瀏覽器解析：圖像下方產生間隙
Changed By: HP
Change Date: February 13, 2012 08:21PM
圖像標籤img的跨瀏覽器案例跨瀏覽器解析：圖像下方產生間隙
Change Date: February 13, 2012 08:21PM
圖像標籤img的跨瀏覽器案例跨瀏覽器解析：圖像下方產生間隙
Changed By: JinJin
Change Date: February 12, 2012 03:50PM
圖像標籤img的跨瀏覽器案例跨瀏覽器解析：圖像下方產生間隙
Change Date: February 12, 2012 03:50PM
圖像標籤img的跨瀏覽器案例跨瀏覽器解析：圖像下方產生間隙
Changed By: JinJin
Change Date: February 10, 2012 10:28PM
圖像屬性圖像標籤img的跨瀏覽器案例跨瀏覽器解析：圖像下方產生間隙
Change Date: February 10, 2012 10:28PM
圖像屬性圖像標籤img的跨瀏覽器案例跨瀏覽器解析：圖像下方產生間隙
Changed By: JinJin
Change Date: February 10, 2012 10:35AM
圖像屬性img的跨瀏覽器案例跨瀏覽器解析：圖像下方產生間隙
Change Date: February 10, 2012 10:35AM
圖像屬性img的跨瀏覽器案例跨瀏覽器解析：圖像下方產生間隙
Original Message
作者: JinJinDate: February 10, 2012 09:20AM
圖像屬性img的跨瀏覽器案例跨瀏覽器解析：圖像下方產生間隙
圖像屬性img
圖像下方產生間隙
相異瀏覽器：FF、IE6、IE7、OP
相異瀏覽器：待研究
相異瀏覽器：IE7、IE6
問題描述：
在img元素的父元素中，試著顯示出背景或border時，會發現img元素之下，會產生一道小小的間隙。這並非瀏覽器的bug，而是依照CSS的規格，vertiical-align的起始值為 「baseline」，因此圖像下方會對齊「baseline」的這個 「bas實是為了能讓文字在基準線 「baseline」之下的部分也能完整顯示
line」之下的部分也能完整顯示而保留的區域中，像「g」和「j」這些字母會超出基準線的下方，而用來顯示這個超
lign:bottom;}
隙
[IMG]http://i556.photobucket.com/albums/ss1/whc915/img-ie6.jpg[/IMG
1.變更vertiical-align的值
只要將vertiical-align屬性的值，從起始可直接設定的屬性，因此只要以img元素為套用對象，設定「vertiib>CSS程式碼
其他瀏覽器顯示→下方無空隙