html5 doctype圖像填充底部bug

我一直在製作網站幾年了，但直到最近我纔開始使用html5文檔類型，今天我發現了4px的填充底部添加到圖像的行爲。html5 doctype圖像填充底部bug

的填充，如果你改變的doctype XHTML1.0到

這裏消失是一個簡單的例子：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>Technic-Al</title> 
    <style> 
html, body { 
margin:0; 
padding:0; 
} 
#contain { 
width: 900px; 
background-color:#6C0; 
} 
</style> 
</head> 

<body> 
<div id="contain"> 
<img src="images/head.gif" width="900" height="100" border="0" alt="head"> 
</div> 
</body> 
</html>

量變到質變的DOCTYPE任何其他的去除底部填充（綠色從背景）

不少人都來這裏上建議修復

的line-height = 0

我相信還有另一種修復方法也可以。

或者我應該說「變通」

但肯定這是與HTML5文檔類型的錯誤嗎？

我們該說些什麼呢？誰處理這樣的錯誤？我們如何解決它？

有沒有人知道如何解決這個問題？

來源

2012-11-22 Almeister9

這是不是一個錯誤，這是什麼CSS規範說應該發生。這不是HTML5特定的，HTML 4.01 strict和XHTML 1.0 strict doctypes會做同樣的事情。

這不是填充 - 它是計算線框高度的結果。

有沒有希望改變它，太多的網頁取決於現有的行爲。

對此的適當權限是W3C CSS working group。

來源

2012-11-22 13:47:38 Alohci

感謝您的回答。我已經爲這個網搜了幾個星期了，但是你確切地回答了我之後的事情。我必須說，我發現很多css違反直覺，很難讓我的頭腦發現，即使經過多年的工作。我現在已經包含了img {display：block;}作爲我正常的css重置的一部分。 – Almeister9

使用vertical-align財產在你的CSS：

img{ 
    vertical-align:top; 
}

來源

2012-11-22 11:12:53

感謝您分享您的解決方法。但它並沒有回答這個問題。 – Almeister9

從我所看到的，流行的解決方法是img {display：block}。我仍然不明白爲什麼我們需要解決。我只是想了解我們如何解決這個問題，以及誰通過。 – Almeister9

我這裏頁的顯示填充在

頁面底部

img { display:block ; }

在CSS文件上面寫着解決我的問題的問題。希望得到這個幫助

來源

2013-08-12 11:59:17 Dashrath

html5 doctype圖像填充底部bug

回答

相關問題