为什么 Safari 的 document.adoptNode() 在源文档处于 quirks 模式时将 css 类名转

Why does Safari's document.adoptNode() convert css class names to lowercase when source document is in quirks mode?

本文关键字:模式 quirks css 文档 document Safari adoptNode 为什么      更新时间:2023-09-26

我正在使用XHR(XML Http Request)来加载html片段。我正在使用 responseType = "document" 为了将 html 解析卸载到浏览器。当 ajax 调用完成时,我正在使用 document.adoptNode() 在我的主文档中包含 ajax html 元素。

我注意到一个奇怪的错误,它只影响Safari(El Capitan和iOS 9.3.2上的v9.1.1)。似乎当 Safari 采用该节点时,它会将 css 类名转换为小写。有关完整演示,请参阅此jsfiddle:https://jsfiddle.net/theblueslate/wxo7zst5/2/

此错误不会在 Chrome v51 或 IE11 上发生。

来自 jsfiddle 的代码包含在此处:

function buildDataLoadedCallback (containerId, useAdopt) {
    return function() {
        var parsedDoc = this.response;
        var parsedBodyChild = parsedDoc.body.children[0];
        var newNode;
        if (useAdopt) {
            newNode = document.adoptNode(parsedBodyChild);
        } else {
            newNode = document.importNode(parsedBodyChild, true);
        }
        var container = document.getElementById(containerId);
        container.appendChild(newNode);
    }
}
function requestAjaxHtmlFragment(pageName, callback) {
    var xhr = new XMLHttpRequest();
    xhr.responseType = "document";
    xhr.addEventListener("load", callback);
    /* this fragment.html file simply contains:
    <div class="myClass">
    <p>MyClass</p>
    </div>
    */
    xhr.open("GET","https://dl.dropboxusercontent.com/u/15211879/js-fiddle/" + pageName + ".html", /*async:*/true);
    xhr.send();
}
var pageName =  "fragment";
requestAjaxHtmlFragment(pageName, buildDataLoadedCallback(pageName + "-adopt-container", true));

是否有我缺少的明显错误?我无法发现它,并且我提出了一个webkit错误:https://bugs.webkit.org/show_bug.cgi?id=159555,但我希望我错了。

原来这是一个错误。现已在 WebKit 中修复:https://bugs.webkit.org/show_bug.cgi?id=159555

我认为将其发布到 SO 仍然很有用。发帖增加了像我一样在这个问题上苦苦挣扎的任何其他人的知名度。