奇怪的html5行爲

下面的html（5）會在div底部產生一條黑線。這是因爲div比包含的圖像高。但我想知道爲什麼發生這種情況奇怪的html5行爲

<!DOCTYPE html> 
<html> 
    <body> 
    <div style="position:absolute; background:#000;"> 
    <img src="http://images.google.com/intl/de_ALL/images/logos/images_logo_lg.gif" style="height:50px;"> 
    </div> 
    </body> 
</html>

我不認爲這是一個瀏覽器錯誤，因爲在Firefox，Chrome和Opera中的結果是一樣的。當使用XHTML的doctype它使得罰款：

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

BTW：它的工作在HTML5過，但只有當我設置顯示：對圖像塊。這真的需要嗎？

來源

2010-09-20 gucki

我覺得Chrome的檢查器在quirks模式打開時存在'vertical-align'屬性的值。 – 2010-09-20 20:37:58

黑色欄是您的背景顏色顯示。如果您不想看到黑色，則可以從您的div風格屬性中刪除background:#000。

另外，爲什麼你的style屬性使用height：50px？如果您嘗試調整圖片本身的大小，請改用高度屬性。

選項2：

此代碼似乎還去除黑色背景的形式顯示：

<!DOCTYPE html> 
<html> 
    <body> 
    <div style="background:#000;"> 
    <img src="http://images.google.com/intl/de_ALL/images/logos/images_logo_lg.gif" style="position:absolute; height: 50px;"> 
    </div> 
    </body> 
</html>

來源

2010-09-20 18:50:07

我添加了黑色僅用於調試目的（整個代碼是爲了顯示問題）。但我想知道爲什麼XHTML和HTML5顯示不同？ – gucki 2010-09-20 18:57:27

嘗試添加到div樣式：'margin：0; padding：0; border：0;'。 – Francisc 2010-09-21 12:05:04

這不是XHTML文檔類型爲這樣的改變，它更像嚴格VS過渡。

使用XHTML 1.0轉換doctype使瀏覽器進入限制怪異模式，而HTML5樣式的文檔類型選擇標準模式。圖像的垂直對齊在兩種模式之間是不同的。

如果您使用<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">也會使瀏覽器進入標準模式，您可以看到相同的黑線。

有許多方法可以去除黑線。一種是將img設置爲display:block。另一個是將img設置爲vertical-align:bottom。

來源

2010-09-20 19:42:54 Alohci

如果只有垂直對齊不同，它不能解釋爲什麼div比圖像高4px。通常圖像應該完全適合，因爲div絕對沒有指定任何寬度/高度。在html5瀏覽器中似乎默默地在底部添加了某種填充？ – gucki 2010-09-22 14:53:16

奇怪的html5行爲

回答

相關問題