согласованность getComputedStyle () в разных браузерах

Question

Мне нужно получить вычисленную позицию 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 в разных браузерах?

---

В Инспекторе краев вы можете видеть (скриншот ниже) фактическое установленное значение auto, но оно показывает вычисленное значение как 0px

---

Скриншоты

Chrome 74.0.3729.131

Edge 44.17763.1.0 | EdgeHTML 18.17763

Answer 1

В этой области произошли последние изменения.

Ранее getComputedStyle возвращало вычисленные значения элемента, теперь он должен возвращать разрешенные значения .

Для свойства bottom правила для получения этого разрешенного значения равны :

Свойство особого случая с разрешенным значением, например top определено в другой спецификации
Если свойство применяется к позиционированному элементу и разрешенное значение свойства display не равно 'none' или 'contents', а свойство не имеет чрезмерных ограничений, то разрешенное значение равно используемое значение . В противном случае разрешенное значение - это вычисленное значение .

Похоже, ваш браузер обрабатывает ваши элементы как позиционированный элемент и, следовательно, использует используемое значение (0px) вместо вычисленное значение ( ключевое слово 'auto' или вычисленное значение <длина-процент> ).

Должен признать, что я не совсем понимаю, почему все другие браузеры не рассматривают ваши липкие элементы как позиционированные элементы, я бы подумал, что и они тоже, но они согласны, что относительно позиционированный элемент возвращает значение разрешения '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 и Могу ли я использовать , что getComputedStyle () обычно поддерживается большинством современных браузеров.

С моей точки зрения, другим результатом нижнего значения может быть поведение самих браузеров отображать нижний атрибут.

Chrome считывает нижнюю часть автоматически, а Edge - 0.

Я также проверил, что если я установлю ширину как auto, результат будет таким же.

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

el2.innerText = getComputedStyle(el2).width;