JavaScript:getComputedStyle 浏览器之间的返回值不一致

Question

我正在尝试像这样获取 CSS left 属性的值... window.getComputedStyle(document.querySelector('.test'), ':after').getPropertyValue('left');

问题是这在 Chrome 中返回一个像素值，但在 FireFox 中返回一个百分比。有什么方法可以让它始终返回一个像素值吗？

JSFiddle:https://jsfiddle.net/r8mynvL4/2/

HTML:

<div class="test">This is a test.</div>

CSS:

.test {
  border: 1px solid black;
  position: relative;
}

.test:after {
  content: '*';
  bottom: -10%;
  left: 95%;
  position: absolute;
}

JS:

var leftValue = window.getComputedStyle(document.querySelector('.test'), ':after').getPropertyValue('left');

console.log(leftValue);

Answer 1

要直接回答这个问题，是的，请按照 e.generalov 最初在 bugzilla report 中描述的方法尝试此方法。 :

function getComputedStylePropertyValue(who, pseudo, propName) {
    var dv = who.ownerDocument.defaultView,
        cStyle = dv.getComputedStyle(who, pseudo),
        tmpNode = null, propVal;

    if (pseudo) {
        var css = cStyle.cssText;
        if (!css) { // it is an empty string. https://bugzilla.mozilla.org/show_bug.cgi?id=137687 
            var sty = [];
            for (var key in cStyle) {
                if (cStyle.hasOwnProperty(key)) {
                    sty.push(cStyle[key] + ':' + cStyle.getPropertyValue(cStyle[key]));
                }
            }
            css = sty.join(';');
        }
        tmpNode = document.createElement('dummy');
        tmpNode.style.cssText = css;
        if (pseudo === '::before' && who.firstChild) {
            who.insertBefore(tmpNode, who.firstChild);
        } else { // ::before in case of empty element or ::after
            who.appendChild(tmpNode);
        }
        cStyle = dv.getComputedStyle(tmpNode, null);
    }

    propVal = cStyle.getPropertyValue(propName);

    if (tmpNode) {
        tmpNode.parentNode.removeChild(tmpNode);
    }
    return propVal;
}

Here it is as a fiddle .

哪个浏览器是正确的？

您可能会感到惊讶，Gecko (Firefox) 似乎 正确地实现了目前的规范。 (我说出现了，因为它的某些部分当然可能仍然存在错误)。快速摘要是 this part of the 'left' property definition :

Otherwise: if specified as a '<length>', the corresponding absolute length; if specified as a '<percentage>', the specified value; otherwise, auto.

计算值的定义 - 左属性。由于position:absolute声明，“否则”正在应用。

那么，为什么 Chrome 不这样做呢？看起来很清楚，对吧？好吧，如果您有兴趣了解该标准如何变得相对不一致，请继续阅读!

CSS 的演变——向后兼容性与一致性的较量

首先，较新的用户代理(如 Chrome)不需要过多考虑向后兼容性，并且基本上可以忽略 CSS 规范中较旧和较晦涩的部分。

对于 Gecko 和规范本身来说，这当然是另一回事。 CSS 无版本 - 例如，您的网站不会声明它使用的是哪个版本的 CSS。相反，CSS 模块有机地构建在彼此之上，并且必须向后兼容。

同时，Chrome 支持一致性。它偶尔会偏离规范的严格定义，原因是插入网络向前发展。典型的结果是更新规范以反射(reflect)任何结果良好的内容。

但是Firefox和自己不一致？这肯定是一个错误？

This fiddle显示非伪元素确实返回 px 值。简而言之，这归因于 CSS 模块相互引用的方式。从 W3C 的 Angular 来看，正是对这种引用方案的严格遵守使 Firefox 成为事实上的引用实现。

因此，例如 getComputedStyle 的定义明确引用 CSS 级别 2:

This method is used to get the computed style as it is defined in [CSS2].

如果我们继续看一下计算值的定义 defined in there然后我们看到它曾经以像素为单位定义:

percentages must be multiplied by a reference value (each property defines which value that is)

同时，::before 和::after 等伪元素明确引用了 CSS3；他们使用 left 的 CSS3 描述 now defines it differently .

请记住，此规范是工作草案 - 浏览器无需遵循它(但 Firefox 正在这样做)。另一方面，Chrome 正在插入一致性路线 - 即整个 API 总是只返回那些使用过的值。