不同浏览器之间的getComputedStyle（）一致性

Question

我需要为一个元素获取一个 computing CSS位置，但是当使用auto而不是一个数字值时，我在浏览器中得到的结果不一致。

例如，在下面的演示中，设置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的实际计算值？

---

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

---

屏幕截图

Chrome 74.0.3729.131

边缘44.17763.1.0 | EdgeHTML 18.17763

Answer 1

该区域最近发生了变化。

以前，getComputedStyle返回一个元素的Computed Values，现在应该返回其Resolved Values。

对于bottom属性，rules to get this resolved value are：

  

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

听起来您的浏览器将您的元素视为放置在位置的元素，因此使用used value（0px）而不是computed value（关键字“ auto”或计算出的值）。

我必须承认我不清楚为什么所有其他浏览器都不将您的粘性元素视为定位元素，我本以为也是如此，但他们确实同意相对定位的元素会返回< em>解决价值 '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之间获得一致的值，除非您可以避免放置元素，否则应该获得{ {1}}无处不在。

Answer 2

我已经尝试过您的代码，并重新处理了您的问题。

您可以从MDN和Can I Use中检查一下，大多数现代浏览器通常都支持getComputedStyle（）。

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

Chrome将底部读为自动，而Edge则读为0。

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

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

el2.innerText = getComputedStyle(el2).width;