javascript - getComputedStyle() 跨浏览器的一致性

Question

我需要获取元素的计算autoCSS 位置，但是当使用而不是数字值时，我会在浏览器中得到不一致的结果。

比如下面demo中设置bottom: auto; Chrome和Firefox的时候报告auto，但是Edge报告0px

var el1 = document.querySelector('#one');
el1.innerText = getComputedStyle(el1).bottom;

var el2 = document.querySelector('#two');
el2.innerText = getComputedStyle(el2).bottom;

#one, #two {
  position: sticky;
  padding: 20px;
  color: white;
}

#one {
  bottom: 0px;
  background: red;
}

#two {
  bottom: auto;
  background: blue;
}

<div id="one"></div>
<div id="two"></div>

有没有其他方法可以获得auto跨浏览器一致的实际计算值？

---

在边缘检查器中，您可以看到（下面的屏幕截图）实际设置值，auto但它显示计算值为0px

---

截图

铬 74.0.3729.131

边缘 44.17763.1.0 | EdgeHTML 18.17763

Answer 1

这方面最近发生了一些变化。

以前，getComputedStyle是返回一个元素的计算值，现在它应该返回它的解析值。

对于bottom属性，获取此解析值的规则是：

解析值特殊情况属性，如top 在另一个规范中定义的
  如果该属性应用于定位元素并且显示属性的解析值不是'none'or 'contents'，并且该属性没有过度约束，则解析值是使用值。否则，解析的值就是计算的值。

听起来您的浏览器将您的元素视为定位元素，因此使用使用的值( 0px) 而不是计算的值（关键字 'auto' 或计算的 <length-percentage> 值）。

我必须承认我不太清楚为什么所有其他浏览器都不将您的粘性元素视为定位元素，我原以为它们也是，但他们确实同意相对定位的元素返回解析值 '0px'，

var el1 = document.querySelector('#one');
el1.innerText = getComputedStyle(el1).bottom;

var el2 = document.querySelector('#two');
el2.innerText = getComputedStyle(el2).bottom; // '0px' everywhere

#one, #two {
  position: relative;
  padding: 20px;
  color: white;
}

#one {
  bottom: 0px;
  background: red;
}

#two {
  bottom: auto;
  background: blue;
}

<div id="one"></div>
<div id="two"></div>

而未定位的则返回计算值 'auto'。

var el1 = document.querySelector('#one');
el1.innerText = getComputedStyle(el1).bottom;

var el2 = document.querySelector('#two');
el2.innerText = getComputedStyle(el2).bottom; // 'auto' everywhere

#one, #two {
  position: static;
  padding: 20px;
  color: white;
}

#one {
  bottom: 0px;
  background: red;
}

#two {
  bottom: auto;
  background: blue;
}

<div id="one"></div>
<div id="two"></div>

不幸的是，我认为没有办法在实现了这些更改的浏览器、未实现这些更改的浏览器和 Edge 之间获得一致的值，除非您可以避免定位元素，那么您应该'auto'无处不在。

Answer 2

我已经尝试了您的代码，并在我这边重现了您的问题。

您可以从MDN和Can I Use查看大多数现代浏览器通常支持 getComputedStyle()。

从我的角度来看，底部值的不同结果可能是浏览器显示底部属性的自我行为。

Chrome 将底部读取为自动，但 Edge 将其读取为 0。

我还测试过，如果我将宽度设置为自动，结果将是相同的。

    #two {
        bottom: auto;
        background: blue;
        width:auto;
    }

el2.innerText = getComputedStyle(el2).width;