Question

问题：当我在head元素中放置链接，样式或脚本元素时，浏览器似乎错误地将这些元素移动到通过遍历JavaScript节点树检测到的body元素中。错误地我的意思是他们违反了规范。例如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 contentedible和移动元素时，元素变得混乱，无法解开。由于html5支持这些元素的类属性，我想知道我是否可以使用“headtype”类来区分这些特定元素。

这有点类似Webkit moves head content to body, and adds extra space?，但更详细。这个问题是针对WebKit的，但我已经在WebKit，Chrome，IE和Firefox中对此进行了测试，并且在每个困惑我的浏览器中得到了相同的结果。

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

Answer 1

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

为什么链接，样式和脚本元素被浏览器错误地从头到脚移动？

1 个答案: