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

回答