2016-11-10 112 views
15

考慮這個代碼(也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是拿起它用於渲染目的。

+1

歡迎來到Stack Overflow!你的問題的全部內容,必須在**你的問題,而不僅僅是鏈接**。鏈接腐爛,使問題及其答案在未來的人們中毫無用處,人們不應該離開現場去幫助你。在**問題中放置一個[mcve] **,最好使用Stack Snippets('<>'工具欄按鈕)使其可運行。更多:[*我如何提出一個好問題?](/ help/how-to-ask) –

+1

mplungjan和我已經更新了與上述內容相關的問題^^ –

+1

聽起來像是針對'jQuery'的錯誤報告或'Edge'。與此同時,您可以嘗試使用getComputedStyle(document.getElementById('input'))。fontSize'並查看它是否正確。 – Adam

回答

9

更新:bug below現在是固定的; FremyCompany說,他/她是從邊緣團隊項目經理和修補程序將在2017年年初


它看起來非常像一個IE瀏覽器和邊緣缺陷的客戶。沒有找到它,I reported it

這裏有一個更新的片段,看到的IE/EDGE是通過getComputedStylecurrentStyle告訴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財產(這是令人放心的,他們至少說同樣的事情):

enter image description here

因此,它不是一個jQuery錯誤,它通過JavaScript報告大小(看起來像當inherit是管制規則)時是微軟的錯誤,即使它正確渲染它。

我試圖找到一種方法,使這個灰色地帶,但想不到任何東西。例如,根據規範,在span內有input是完全有效的。

+2

更具體地說,IE/Edge在報告大小時不會識別'inherit'指令。渲染是正確的,但。 – Christoph

+0

@Christoph:的確,關於渲染的好點。 –

+0

我想這是IE11和Edge的JavaScript引擎的問題。他們計算CSS值而不是繼承值。 – Megajin

0

在我找到真正的答案之前,我想深入一點細節。

這段代碼在做什麼?

.css(); 

jQuery Docs他們告訴我們:

得到一個計算樣式屬性的第一個元素的值 匹配的元素集合的或 每設置一個或多個CSS屬性匹配元素。

此外:

的的CSS()方法是一種方便的方式從所述第一匹配元件得到一個計算樣式屬性 ,特別是在不同的 方式瀏覽器光訪問大多數的那些物業(...)

那麼計算是什麼意思?

MDN Docs

CSS屬性的計算值從指定 值由下式計算:

  • 處理的特殊值繼承和初始和
  • 否則計算需要達到物業概要中「計算值」一行中描述的值

好的,現在那部分也是清楚的。讓我們開始真正的答案:

根據Specifics on CSS Specificity有CSS規則更多的「重量」比其他人有一個HTML元素上。

下面是實際的順序:

  1. 樣式屬性
  2. ID
  3. 類,僞類屬性

據掌管你的輸入應該已經採取從Style屬性繼承30px。

那麼IE11/Edge發生了什麼?

IE11和Edge都計算錯誤的CSS規則。如果你改變你的CSS只有這個:

span input { 
    font-size: inherit; 
} 

它開始工作。隨着信息收集我假設JavaScript的 - 兩個引擎正在計算真正的價值CSS,而不是按照CSS規則的順序。

我試圖要麼更改ID,並把一類的輸入,但仍然沒有運氣。

我記得IE11和邊緣有一些問題,繼承和CSS僞類,也許這是有關嗎?

Regards, Megajin

相關問題