奇怪的HTML5切片圖片保證金頂部和底部問題

將HTML4與HTML5進行比較時，在將切片圖片放到我的網站時遇到了一個奇怪的問題。奇怪的HTML5切片圖片保證金頂部和底部問題

請參見下面的示例頁面：

正如你可以在HTML5版本中看到，不必要的利潤率出現在的圖像邊緣頂&底部，並且無法刪除通過CSS覆蓋。如何使HTML5版本看起來與HTML4版本相同（在這種簡單的情況下）？

p.s.這兩個文件的唯一區別是標頭DOCTYPE聲明。

2012-01-04 Raptor

將img {vertical-align: bottom;}添加到您的CSS。

2012-01-04 04:32:16

賓果！但爲什麼需要此修復？ – Raptor 2012-01-04 05:36:52

因爲默認情況下圖像與文本對齊，這意味着它們必須允許字符之下的空格用於諸如'q'的字母。使用「底部」作爲對齊將圖像對齊到線條的底部。唯一會遇到問題的是如果圖像高度小於文本的高度（'line-height'屬性）。 – 2012-01-04 05:38:14

嘗試從表中刪除高度&寬度& IMGS

2012-01-04 04:41:39 Nalaka526

沒有工作，對不起。 – Raptor 2012-01-04 05:36:59

添加img { display: block; }到你的CSS。 HTML5會導致瀏覽器呈現內嵌內容與HTML4略有不同。

2012-06-25 14:19:24 Sprintstar

回答