关于 window.getComputedStyle 以及 Chrome 处理方式不同的解释答案

【问题标题】：Explanation on window.getComputedStyle and why Chrome handles it differently关于 window.getComputedStyle 以及 Chrome 处理方式不同的解释
【发布时间】：2014-03-29 13:31:15
【问题描述】：

自 Chrome Stable 登陆 v.33.0.1750.117 以来，window.getComputedStyle 的逻辑与其他浏览器有所不同。下面的代码小提琴：http://jsfiddle.net/HD4bD/17/

谁能解释发生了什么变化以及对此的“正确”裁决是什么？

鉴于以下情况：

HTML

<body>
    <div class="normal"></div>
    <div class="display-none"></div>
    <div class="visibility-hidden"></div>
</body>

CSS

.normal:before {
    content: "NORMAL: "
}

.display-none:before {
    content: "DISPLAY-NONE: ";
    display: none;
}

.visibility-hidden:before {
    content: "VIS-HIDDEN: "
    visibility: hidden;
}

JS

var $ = document.querySelector.bind(document),
    pass = "This text should have 1 or more labels before it",
    fail = "The label is missing.  Something's wrong.",
    normalContent = getB4Content('.normal'),
    dNoneContent = getB4Content('.display-none'),
    vHideContent = getB4Content('.visibility-hidden');

function getB4Content(selector){
     return window.getComputedStyle($(selector),':before').getPropertyValue('content');
}



$('.normal').innerHTML = normalContent === '' ? fail : normalContent + pass;

$('.display-none').innerHTML = dNoneContent === '' ? fail : dNoneContent + pass;

$('.visibility-hidden').innerHTML = vHideContent === '' ? fail : vHideContent + pass;

输出

Firefox v27：
NORMAL: "NORMAL: "此文本前应有 1 个或多个标签
"DISPLAY-NONE: "此文本前应有 1 个或多个标签
none此文本之前应该有 1 个或多个标签

IE 11 NORMAL: "NORMAL: "此文本前应有 1 个或多个标签
"DISPLAY-NONE: "此文本前应有 1 个或多个标签
none此文本之前应该有 1 个或多个标签

Chrome v33
NORMAL: "NORMAL: "此文本前应有 1 个或多个标签
标签丢失。出了点问题。
标签丢失。出了点问题。

【问题讨论】：

Another question on what appears to be the same topic.

标签： javascript google-chrome dom web-standards

【解决方案1】：

看来这是reported Chromium bug。

【讨论】：

好吧，我想这可以解释它=）。