Почему .css('fontSize') производит разные результаты в Edge?

Рассмотрим этот код (также в скрипка):

document.getElementById("span").innerHTML += $('#input').css('fontSize');

span input {
  font-size: inherit;
}

input {
  font-size: 15px;
}

<span id="span" style="font-size: 30px;">
  <input id="input"/>
</span>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

Ответ 1

Обновление: Теперь исправлена ошибка ниже; FremyCompany говорит, что он/она является менеджером программ из команды Edge, и исправление достигнет клиентов в начале 2017 года.

Он очень похож на ошибку IE и Edge. Не нашли его, Я сообщил об этом.

Здесь обновляется фрагмент, который видит, что IE/Edge сообщает jQuery через getComputedStyle или currentStyle:

var input = $("#input");
console.log("jQuery: " + input.css('fontSize'));
if (window.getComputedStyle) {
  console.log("getComputedStyle: " + getComputedStyle(input[0]).fontSize);
}
if (input[0].currentStyle) {
  console.log("currentStyle: " + input[0].currentStyle.fontSize);
}

span input {
  font-size: inherit;
}

input {
  font-size: 15px;
}

<span id="span" style="font-size: 30px;">
  <input id="input"/>
  <span id="size"></span>
</span>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

Ответ 2

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

Что делает этот кусок кода?

.css();

В jQuery Docs они сообщают нам:

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

Далее

Метод .css() - удобный способ получить свойство вычисленного стиля от первого согласованного элемента, особенно в свете различных способы доступа браузеров к большинству этих свойств (...)

Итак, что означает вычисляемое значение?

Документы MDN:

вычисленное значение свойства CSS вычисляется из указанного значение:

Обработка наследуемых и начальных специальных значений и

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

Хорошо, теперь эта часть тоже понятна. Вернемся к реальному ответу:

В соответствии с Специфика Спецификации CSS существуют css-правила с более "весом", чем другие элементы HTML.

Вот фактический порядок:

Атрибут стиля
ID
Класс, атрибуты псевдокласса
Элемент

В соответствии с этими правилами ваш вход должен был унаследовать 30px из атрибута Style.

Итак, что происходит в IE11/Edge?

IE11 и Edge оба неправильно вычисляют правила CSS. Если вы измените свой CSS только на это:

span input {
  font-size: inherit;
}

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

Я попытался либо изменить идентификатор, либо поставить класс на вкладке, но все равно не повезло.

Я помню, что у IE11 и Edge были некоторые проблемы с наследуемыми CSS и псевдоклассами, возможно, это связано с этим?

С уважением, Megajin