HTML5 Doctype擰高DIV高度？

呈現在Chrome，Safari瀏覽器，或Firefox頁面時在Mac上，如果我使用HTML5的doctypeHTML5 Doctype擰高DIV高度？

<!DOCTYPE html>

，並把圖像的DIV中，股利呈現持續4個像素太高。如果我使用較舊的文檔類型

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

div渲染正確，它與其中的圖像高度相同。這是使用完全相同的HTML和CSS代碼。唯一改變的是文檔類型和額外的4個像素顯示。有沒有什麼辦法解決這一問題？

來源

2011-07-14 Jarrod Ballou

你應該看看html5reset.org – Catfish

HTML5指定應該呈現元素內的空白。因此，如果將字體大小設置爲0，則會得到4px的額外空間，例如，該空間將消失。

來源

2011-07-14 21:10:47 Johan

它並不真正有什麼用HTML5。這是「標準模式」與「不」。 'font-size：0'確實可以解決這個問題，但這不是通常的解決方法。 – thirtydot

這不是事實，我不確定它爲什麼得到3票。下面的答案是有效的。 – MMM

http://hsivonen.iki.fi/doctype/

<!DOCTYPE html> =標準模式 - http://jsbin.com/ogacor

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> =幾乎標準模式 - http://jsbin.com/ogacor/2

爲了修正它，添加display: block或vertical-align: top（或bottom）到img。

這種情況發生在首位的原因是，img S被默認inline元素，並有一個默認的baselinevertical-align。基線不會觸及包含元素的底部 - 間隔是兩者之間的距離。

參見：

來源

2011-07-14 21:22:13 thirtydot

HTML5 Doctype擰高DIV高度？

回答

相關問題