Question

考虑这段代码（也在a fiddle中）：

＆＃13;

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

＆＃13;

span input {
  font-size: inherit;
}

input {
  font-size: 15px;
}

＆＃13;

<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>

＆＃13;

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

输入使用30px字体呈现，因此IE / Edge会将其拾取以进行渲染。

Answer 1

更新： bug below现已修复; FremyCompany表示他/她是Edge团队的项目经理，该修复程序将于2017年初到达客户。

它看起来非常像IE和Edge错误。没找到，I reported it。

以下是对该片段的更新，该片段通过getComputedStyle或currentStyle了解IE / Edge告诉jQuery：

＆＃13;

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);
}

＆＃13;

span input {
  font-size: inherit;
}

input {
  font-size: 15px;
}

＆＃13;

<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>

＆＃13;

对我来说，IE11从15px和特定于Microsoft的getComputedStyle属性返回currentStyle（它让人放心，他们至少会说同样的事情）：< / p>

所以它不是一个jQuery错误，它是通过JavaScript报告大小时的微软错误（看起来像inherit是管理规则），即使它是渲染它正确。

我试图找到一种方法使这个灰色区域，但无法想到任何事情。例如，根据规范，在input内部span完全有效。

Answer 2

在我得到真正的答案之前，我想深入了解一些细节。

这段代码在做什么？

.css();

他们告诉我们jQuery Docs：

获取第一个元素的计算样式属性的值匹配元素的集合或设置一个或多个CSS属性每个匹配的元素。

此外：

.css（）方法是获取计算样式属性的便捷方法从第一个匹配的元素，特别是根据不同的浏览器访问大多数这些属性的方式（...）

那么计算的意思是什么？

MDN Docs：

CSS属性的计算值是根据指定的值计算的   价值：


处理特殊值inherit和initial，以及

进行所需的计算，以达到属性摘要中“计算值”行中描述的值

好的，现在那个部分也很清楚了。让我们得出真正的答案：

根据Specifics on CSS Specificity，有一些css规则比其他人在HTML元素上具有更多“权重”。

这是实际的顺序：

样式属性
ID
类，伪类属性
元素

根据该规则，您的输入应该从Style属性中获取继承的30px。

那么IE11 / Edge中发生了什么？

IE11和Edge都在计算CSS规则错误。如果您只将CSS更改为：

span input {
  font-size: inherit;
}

它开始起作用了。通过收集的信息，我假设两者的JavaScript - Engine都在计算真正的CSS值而不是遵循CSS规则顺序。

我试图改变ID并在输入上放一个类，但仍然没有运气。

我记得IE11和Edge在继承CSS和伪类方面存在一些问题，可能与此有关吗？

此致 Megajin

为什么.css（＆＃39; fontSize＆＃39;）会在Edge中产生不同的结果？

2 个答案: