問題: link、style、または script 要素を head 要素に配置すると、ブラウザはこれらの要素を誤って body 要素に移動しているように見えます (JavaScript ノード ツリーをたどると検出されます)。誤って、仕様に違反していることを意味します。たとえばhttp://www.whatwg.org/specs/web-apps/current-work/#the-link-elementには次のように記載されています。
注: rel 属性を使用すると、要素は head 要素に制限されます。
ここに私のコードがあります
<!DOCTYPE html>
<html>
<head>
<title>head test</title>
<meta charset="utf-8" />.
<link href="sample.css" rel="stylesheet" />
<script></script>
<style>p{font-family:"Times New Roman";font-size:20px;}</style>
</head>
<body>
<p>test paragraph</p>
<script type="text/javascript">
function htmlTree(obj){
var obj = obj || document.getElementsByTagName('html')[0];
var str = "<ul><li>" + obj.tagName;
if (obj.hasChildNodes()) {
var child = obj.firstChild;
while (child) {
if (child.nodeType === 1) {
str += htmlTree(child)
}
child = child.nextSibling;
}
}
str += "</li></ul>";
return str;
}
window.onload=document.write(htmlTree());
結果は次のとおりです。
HTML
HEAD
TITLE
META
BODY
LINK
SCRIPT
STYLE
P
SCRIPT
head にあった link、script、style 要素は body に移動されましたが、title 要素と meta 要素は正しいことに注意してください。残念ながら、HTML5 contentedible を使用して要素を移動すると、要素がすべてごちゃごちゃになり、もつれを解くことができないため、これが問題になりました。html5 はこれらの要素のクラス属性をサポートしているため、「headtype」クラスを使用してこれらの特定の要素を区別できるかどうか疑問に思っています。
これは、 Webkit がヘッド コンテンツをボディに移動し、余分なスペースを追加するのと似ていますか? しかし、より詳細です。その質問は WebKit に固有のものでしたが、WebKit、Chrome、IE、および Firefox でこれをテストしたところ、各ブラウザーで同じ結果が得られ、困惑しました。
主要なブラウザーはすべて同じ動作をするため、何か誤解しているのではないかと思います。助けていただければ幸いです。