为什么.css('fontSize')会在Edge中产生不同的结果？

Question

考虑一下这段代码(也是一个小提琴):

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>

在Chrome和Firefox中,.css('fontSize')它将返回30px,在Edge和IE中它将是15px.为什么这样做？Edge中的DOM Explorer甚至显示15px的删除线,因此应该将继承的30px作为fontSize:

并且输入使用30px字体呈现,因此IE/Edge正在将其拾取以用于渲染目的.

Answer 1

更新:以下错误现已修复; FremyCompany表示,他/她是Edge团队的项目经理,该修复工具将于2017年初推出.

它看起来非常像IE和Edge bug.我没有找到它,我报告了它.

下面是摘录的更新程序,看到的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>

对我来说,IE11 15px从两者getComputedStyle和特定于Microsoft的currentStyle属性返回(它让人放心,他们至少会说同样的事情):

因此,它不是一个jQuery错误,它是一个微软的错误,通过JavaScript报告大小(看起来像什么时候inherit是管理规则),即使它正确呈现它.

我试图找到一种方法使这个灰色区域,但无法想到任何东西.例如,根据规范,input内部a span是完全有效的.