क्यों .css ('fontSize') एज में अलग-अलग परिणाम उत्पन्न करता है?

Question

(a fiddle में भी) इस कोड पर विचार करें:

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>

क्रोम और Firefox में, .css('fontSize') 30px वापस आ जाएगी एज और IE यह 15px है में,। वह ऐसा क्यों करता है? एज में डोम एक्सप्लोरर भी स्ट्राइकथ्रू में 15px से पता चलता है, और इसलिए FONTSIZE के रूप में विरासत में मिला 30px लेना चाहिए:

और इनपुट, एक 30px फ़ॉन्ट के साथ प्रदान की गई है तो आईई/एज यह उठा प्रतिपादन उद्देश्यों के लिए।

Answer 1

अद्यतन:bug below अब तय किया गया है; FremyCompany कहना है कि वह/वह एज टीम की ओर से एक कार्यक्रम प्रबंधक है और ठीक जल्दी 2017.

---

यह एक IE और एज बग की तरह बहुत ज्यादा लग रहा है के ग्राहकों तक पहुंच जाएगा। इसे नहीं मिला, I reported it।

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:

यहाँ टुकड़ा के लिए एक अद्यतन है कि देखता क्या आईई/एज getComputedStyle या currentStyle के माध्यम से jQuery कह रहा है है विशिष्ट currentStyle संपत्ति (यह आश्वस्त है कि वे कम से कम एक ही बात करते हैं):

तो यह एक jQuery बग नहीं है, यह जावास्क्रिप्ट के माध्यम से आकार की रिपोर्ट करते समय एक माइक्रोसॉफ्ट बग है (ऐसा लगता है कि inherit शासी शासन है), भले ही यह सही ढंग से प्रस्तुत कर रहा हो।

मैंने इसे भूरे रंग के क्षेत्र बनाने के लिए एक रास्ता खोजने की कोशिश की, लेकिन कुछ भी नहीं सोच सका। उदाहरण के लिए, spec के अनुसार, span के अंदर पूरी तरह मान्य है।

Answer 2

इससे पहले कि मैं असली जवाब प्राप्त करूं, मैं विवरण में थोड़ा सा खोदना चाहता हूं।

कोड का यह टुकड़ा क्या कर रहा है?

.css(); 

jQuery Docs में वे हमें बताएं:

में मिलान तत्वों के सेट पहले तत्व के लिए एक गणना शैली संपत्ति का मूल्य प्राप्त करें या हर के लिए एक या अधिक सीएसएस गुण सेट मिलान तत्व

इसके अलावा:

.css() विधि विशेष रूप से अलग तरीके ब्राउज़रों के प्रकाश में, सबसे पहले मिलान तत्व से एक गणना शैली संपत्ति प्राप्त करने के लिए एक सुविधाजनक तरीका है उन लोगों में से अधिकांश का उपयोग गुण (...)

तो गणना का मतलब क्या है?

MDN Docs:

एक सीएसएस संपत्ति का परिकलित मान द्वारा निर्दिष्ट मूल्य से गणना की जाती है:

• हैंडलिंग विशेष मान के वारिस और प्रारंभिक, और
• गणना कर संपत्ति के सारांश

में "गणना मूल्य" पंक्ति में वर्णित मान तक पहुंचने के लिए आवश्यक

ठीक है, अब वह हिस्सा भी स्पष्ट है। आइए असली जवाब प्राप्त करें:

Specifics on CSS Specificity के अनुसार सीएसएस-नियम हैं जो दूसरों के मुकाबले अधिक 'वजन' के साथ हैं। अपने इनपुट लिया है चाहिए नियम

1. शैली विशेषता
2. आईडी
3. क्लास, छद्म वर्ग
4. तत्व

जोड़ी जाने वाली विशेषताओं के अनुसार:

यहाँ वास्तविक आदेश है शैली विशेषता से विरासत में 30px।

तो आईई 11/एज में क्या हो रहा है?

आईई 11 और एज दोनों सीएसएस नियमों की गणना कर रहे हैं। यदि आप अपना सीएसएस केवल इस में बदलते हैं:

span input { 
    font-size: inherit; 
} 

यह काम करना शुरू कर रहा है। एकत्रित जानकारी के साथ मैं मान रहा हूं कि जावास्क्रिप्ट - दोनों का इंजन सीएसएस नियमों के आदेश के बजाय वास्तविक सीएसएस मूल्य की गणना कर रहा है।

मैंने आईडी को बदलने और इनपुट पर कक्षा डालने की कोशिश की है लेकिन अभी भी कोई भाग्य नहीं है।

मुझे याद है कि आईई 11 और एज को विरासत में सीएसएस और छद्म वर्गों के साथ कुछ समस्याएं थीं, शायद यह उससे संबंधित है?

सादर, Megajin