HTML5更改CSS相對和絕對定位

我注意到，使用相對定位CSS，如果我的網頁包含HTML5 DOCTYPE頭<!DOCTYPE HTML>會很不同的處理。例如：HTML5更改CSS相對和絕對定位

<html> 
<body> 

<img src="test.png" /> 
<span style="position: relative; top: -10;">TEST</span> 

</body> 
</html>

將呈現比其默認位置對齊10個像素高的單詞測試，像這樣： text aligned with the image top

但是，如果我添加<!DOCTYPE HTML>到文檔的頂部，並沒有其他變化：

<!DOCTYPE HTML> 
<html> 
<body> 

<img src="test.png" /> 
<span style="position: relative; top: -10;">TEST</span> 

</body> 
</html>

則相對定位似乎沒有對單詞測試影響： text no longer aligned

此行爲在Windows上的IE，Chrome和Firefox的最新版本中保持一致。在使用和不使用HTML5 doctype標頭的絕對定位時，我注意到了其他古怪的行爲。

是否有關於如何相對和絕對定位的根本性轉變在HTML5應用？

2012-08-01 tronman

你已經注意到了'quirky'行爲怎麼把你的瀏覽器進入'quirks'模式;） – 2012-08-01 15:23:41

這有什麼好做HTML5;這是quirks mode和標準模式之間的差異，兩者都存在很長時間。

怪癖模式可以由許多因素，其中之一是在你的問題是缺乏一個doctype聲明的完全顯示被觸發。在怪異模式下，允許無單位長度（並且被視爲像素長度），這就是您的相對定位起作用的原因。

在標準模式下，無單位的長度是不允許的（除非它們是零），那麼你的top聲明無效CSS，並且被忽略。無論您使用HTML5文檔類型還是HTML 4或XHTML文檔類型，這都是一樣的。實際上，HTML5 doctype沒有任何特殊的含義或用途 - 它只是爲了使瀏覽器在標準模式下呈現而創建的。

2012-08-01 15:21:16 BoltClock

啊...這樣一個愚蠢的事情我忽略（丟失本機上的長度）。謝謝！ – tronman 2012-08-01 15:36:34

回答