HTML5更改为CSS相对和绝对定位

Question

我注意到,如果我的网页包含HTML5 doctype标题,那么使用相对定位的CSS将以非常不同的方式处理<!DOCTYPE HTML>.例如:

<html>
<body>

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

</body>
</html>

将TEST一词对齐比其默认位置高10个像素,如下所示: 文字与图片顶部对齐

但是如果我添加<!DOCTYPE HTML>到文档的顶部并且不做任何其他更改:

<!DOCTYPE HTML>
<html>
<body>

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

</body>
</html>

然后相对定位似乎对单词TEST没有影响: 文字不再对齐

此行为在Windows的最新版本的IE,Chrome和Firefox中是一致的.在使用带有和不带HTML5 doctype标头的绝对定位时,我注意到了其他古怪的行为.

在HTML5中如何应用相对和绝对定位是否有根本性的变化？

Answer 1

这与HTML5无关; 这是怪癖模式和标准模式之间的差异,两者都存在了很长时间.

Quirks模式可以由许多因素触发,其中一个因素完全没有doctype声明而在您的问题中显示.在怪癖模式下,允许无单位长度(并将其视为像素长度),这就是您的相对定位工作原因.

在标准模式下,不允许无单位长度(除非它们为零),因此您的top声明将变为无效CSS,并被忽略.无论您使用的是HTML5 doctype还是HTML 4或XHTML doctype,都是一样的.实际上,HTML5 doctype没有任何特殊含义或目的 - 它的创建只是为了使浏览器以标准模式呈现.