2

I've noticed that CSS using relative positioning will be handled very differently if my web page contains the HTML5 doctype header <!DOCTYPE HTML>. For example:

<html>
<body>

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

</body>
</html>

will render the word TEST aligned 10 pixels higher than its default position like so: text aligned with the image top

But if I add <!DOCTYPE HTML> to the top of the document and make no other changes:

<!DOCTYPE HTML>
<html>
<body>

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

</body>
</html>

then the relative positioning appears to have no affect on the word TEST: text no longer aligned

This behavior is consistent in the latest versions of IE, Chrome, and Firefox on Windows. I've noticed other quirky behavior when using absolute positioning with and without the HTML5 doctype header.

Is there a fundamental change on how relative and absolute positioning is applied in HTML5?

4

1 に答える 1

8

これは HTML5 とは関係ありません。これは、どちらも長い間存在してきたquirks モードと標準モードの違いです。

Quirks モードは、いくつかの要因によってトリガーされる可能性があります。そのうちの 1 つは、doctype 宣言がまったくないことによって質問に示されています。quirks モードでは、単位のない長さが許可されます (ピクセル長として扱われます)。これが、相対的な配置が機能する理由です。

標準モードでは、単位のない長さは (ゼロでない限り) 許可されないため、top宣言は無効な CSS になり、無視されます。これは、HTML5 doctype を使用していても、HTML 4 または XHTML doctype を使用していても同じです。実際、HTML5 doctype には特別な意味や目的はありません。ブラウザを標準モードで表示させるためだけに作成されたものです。

于 2012-08-01T15:21:16.267 に答える