5

问题：当我将链接、样式或脚本元素放在头元素中时，浏览器似乎错误地将这些元素移动到正文元素中，这通过遍历 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

请注意，头部中的链接、脚本和样式元素已移至正文，而标题和元元素是正确的。不幸的是，这已成为我的一个问题，因为当我使用 HTML5 内容并移动元素时，这些元素会变得混乱并且无法解开。由于 html5 支持这些元素的类属性，我想知道是否可以使用“headtype”类来区分这些特定元素。

这有点类似于Webkit 将头部内容移动到正文，并增加了额外的空间？但更详细。这个问题是 WebKit 特有的，但我已经在 WebKit、Chrome、IE 和 Firefox 中对此进行了测试，并且在每个浏览器中都得到了相同的结果，这让我感到困惑。

由于所有主要浏览器都有相同的行为，我怀疑我误解了一些东西，并希望得到任何帮助。

4

1 回答 1

5

经过更多调查，试图更简洁地描述问题的参数，我发现了问题。在对我为测试用例复制的文件的 HTML 文件进行十六进制转储后，我在元标记之后发现了一些隐藏的控制字符，正如 Rob W 所注意到的那样，这些字符显示为点。删除控制字符后，HTML 可以正常工作。由于我被限制使用在其他地方生成的 HTML，看起来我必须在加载浏览器之前对 HTML 进行预处理。

于 2013-06-12T15:01:17.553 回答