Dom 奇怪的getComputedStyle行为

我最近正在尝试这种HTML比较，这在某种程度上是有效的：

/**
 * Compare 2 dom nodes
 * Given A node, identifier, B node, identifier, depth.
 */
function compare(A,Aid,B,Bid,godeep) {
    if (A.nodeName != B.nodeName) {
        addlog(Aid+' is <'+A.nodeName+'>, '+Bid+' is <'+B.nodeName+'>.');
    }
    for (let a=0; a<A.attributes.length; a++) {
        let key = A.attributes[a].name,
            other = B.attributes[key];
        if (other !== undefined) {//both have attr.
            if (A.attributes[a].value != other.value) {
                addlog(Aid+' has attr '+key+'='+A.attributes[key].value);
                addlog(Bid+' has attr '+key+'='+B.attributes[key].value);
            }
        } else {
            addlog(Aid+' has attr '+key+'='+A.attributes[key].value+', not in other el.')
        }
    }
    //Also check for the other's unique attr:
    for (let b=0; b<B.attributes.length; b++) {
        let key = B.attributes[b].name,
            other = A.attributes[key];
        if (other === undefined) {
            addlog(Bid+' has attr '+key+'='+A.attributes[key].value+', not in other el.')
        }
    }
    //TODO: Why does this not work correctly for styles? height and other attributes are not the same
    // when comparing the same element to itself.
    var cssA = A.ownerDocument.defaultView.getComputedStyle(A,null),
        cssB = B.ownerDocument.defaultView.getComputedStyle(B,null);
    console.log(cssA);
    console.log(cssB);
    for (let i=0; i<cssA.length; i++) {
        if (cssA.getPropertyValue(cssA[i]) != cssB.getPropertyValue(cssB[i])) {
            addlog(Aid+' css '+cssA[i]+'='+cssA.getPropertyValue(cssA[i]));
            addlog(Bid+' css '+cssB[i]+'='+cssB.getPropertyValue(cssB[i]));
        }
    }
    if (A.children.length != B.children.length) {
        addlog(Aid+' has '+A.children.length+' children, '+Bid+' has '+B.children.length);
    }
    if (godeep > 0) {
        for (let i=0; i<A.children.length; i++) {
            if (i< B.children.length) { //compare it
                compare(A.children[i], Aid+'.children['+i+']',
                        B.children[i], Bid+'.children['+i+']')
            }
        }
    }
}

是什么导致了这场冲突？有没有办法使用getComputedStyle而不出现这种奇怪的行为

更新

---

在这里，你可以看到它在浏览器中工作，但在Chrome特权代码中不起作用，如果你尝试使用devtools调整，你可以看到。

看起来问题在于输入节点。

cloneNode（true）

显然将元素从css样式信息中分离出来。

将其转化为一个可复制的示例。。。最好是一个jsfiddle，这样我们就可以玩它了。很可能你没有测试你的想法…@nmaier我做了一些更改并尝试了：jsfiddle.net/xb7F5但似乎有问题，它不会调用该函数。修复了该问题-添加id并设置“No wrap”，这样比较实际上是可见的-并且对我有效（没有日志消息）：

A css border-bottom-color=rgb(0, 0, 0)
B css border-bottom-color=rgb(51, 51, 51)
A css border-left-color=rgb(0, 0, 0)
B css border-left-color=rgb(51, 51, 51)
A css border-right-color=rgb(0, 0, 0)
B css border-right-color=rgb(51, 51, 51)
A css border-top-color=rgb(0, 0, 0)
B css border-top-color=rgb(51, 51, 51)
A css color=rgb(0, 0, 0)
B css color=rgb(51, 51, 51)
A css font-family=serif
B css font-family=Helvetica,arial,freesans,clean,sans-serif
A css font-size=16px
B css font-size=14px
A css font-weight=400
B css font-weight=700
A css height=auto
B css height=19.6px
A css line-height=19px
B css line-height=19.6px
A css list-style-type=disc
B css list-style-type=none
A css margin-bottom=16px
B css margin-bottom=1px
A css margin-top=16px
B css margin-top=1px
A css perspective-origin=50% 50%
B css perspective-origin=429px 9.8px
A css transform-origin=50% 50%
B css transform-origin=429px 9.8px
A css width=auto
B css width=858px
A css -moz-column-gap=16px
B css -moz-column-gap=14px
A css -moz-column-rule-color=rgb(0, 0, 0)
B css -moz-column-rule-color=rgb(51, 51, 51)
A css -moz-text-decoration-color=rgb(0, 0, 0)
B css -moz-text-decoration-color=rgb(51, 51, 51)