2

我注意到如果我的网页包含 HTML5 doctype header，那么使用相对定位的 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 中应用相对和绝对定位的方式是否有根本性的变化？

4

1 回答 1

8

这与 HTML5 无关；这是quirks 模式和standards 模式的区别，两者都存在已久。

怪癖模式可以由多种因素触发，其中一个因素在您的问题中显示为完全缺乏 doctype 声明。在 quirks 模式下，允许使用无单位长度（并被视为像素长度），这就是您的相对定位有效的原因。

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

于 2012-08-01T15:21:16.267 回答