5

問題: 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 でこれをテストしたところ、各ブラウザーで同じ結果が得られ、困惑しました。

主要なブラウザーはすべて同じ動作をするため、何か誤解しているのではないかと思います。助けていただければ幸いです。

4

1 に答える 1

5

問題のパラメータをより簡潔に特徴付けようとして、さらに調査を行った後、問題を発見しました。テスト ケース用にコピーしたファイルの HTML ファイルの 16 進ダンプを実行した後、Rob W が気づいたように、メタ タグの後にいくつかの非表示の制御文字がドットとして表示されているのを見つけました。制御文字を削除した後、HTML は正しく機能しました。他の場所で生成された HTML を使用するように制限されているため、ブラウザーをロードする前に HTML を前処理する必要があるようです。

于 2013-06-12T15:01:17.553 に答える