为什么.css（'fontSize'）在Edge中产生不同的结果？

问题描述：

考虑这个代码（也a fiddle）：为什么.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>

在Chrome和Firefox的.css('fontSize')将返回30像素，在边缘和IE是15像素。它为什么这样做？的DOM Explorer在边缘甚至可以显示在删除线15像素，因此应采取继承30PX作为字体：

且输入是呈现与30PX字体，所以IE/EDGE是拿起它用于渲染目的。

欢迎来到Stack Overflow！你的问题的全部内容，必须在**你的问题，而不仅仅是链接**。链接腐烂，使问题及其答案在未来的人们中毫无用处，人们不应该离开现场去帮助你。在**问题中放置一个[mcve] **，最好使用Stack Snippets（''工具栏按钮）使其可运行。更多：[*我如何提出一个好问题？]（/ help/how-to-ask） –

mplungjan和我已经更新了与上述内容相关的问题^^ –

听起来像是针对'jQuery'的错误报告或'Edge'。与此同时，您可以尝试使用getComputedStyle（document.getElementById（'input'））。fontSize'并查看它是否正确。 – Adam

答

更新：bug below现在是固定的; FremyCompany说，他/她是从边缘团队项目经理和修补程序将在2017年年初

它看起来非常像一个IE浏览器和边缘缺陷的客户。没有找到它，I reported it。

这里有一个更新的片段，看到的IE/EDGE是通过getComputedStyle或currentStyle告诉jQuery的：

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来自getComputedStyle和Microsoft-返回15px具体的currentStyle财产（这是令人放心的，他们至少说同样的事情）：

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

我试图找到一种方法，使这个灰色地带，但想不到任何东西。例如，根据规范，在span内有input是完全有效的。

更具体地说，IE/Edge在报告大小时不会识别'inherit'指令。渲染是正确的，但。 – Christoph

@Christoph：的确，关于渲染的好点。 –

我想这是IE11和Edge的JavaScript引擎的问题。他们计算CSS值而不是继承值。 – Megajin

答

在我找到真正的答案之前，我想深入一点细节。

这段代码在做什么？

.css();

在jQuery Docs他们告诉我们：

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

此外：

的的CSS（）方法是一种方便的方式从所述第一匹配元件得到一个计算样式属性，特别是在不同的方式浏览器光访问大多数的那些物业（...）

那么计算是什么意思？

MDN Docs：

CSS属性的计算值从指定值由下式计算：

处理的特殊值继承和初始和

否则计算需要达到物业概要中“计算值”一行中描述的值

好的，现在那部分也是清楚的。让我们开始真正的答案：

根据Specifics on CSS Specificity有CSS规则更多的“重量”比其他人有一个HTML元素上。

下面是实际的顺序：

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

据掌管你的输入应该已经采取从Style属性继承30px。

那么IE11/Edge发生了什么？

IE11和Edge都计算错误的CSS规则。如果你改变你的CSS只有这个：

span input { 
    font-size: inherit; 
}

它开始工作。随着信息收集我假设JavaScript的 - 两个引擎正在计算真正的价值CSS，而不是按照CSS规则的顺序。

我试图要么更改ID，并把一类的输入，但仍然没有运气。

我记得IE11和边缘有一些问题，继承和CSS伪类，也许这是有关吗？

Regards， Megajin

为什么.css（'fontSize'）在Edge中产生不同的结果？

相关推荐