Consider this code (also in 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=".1.1/jquery.min.js"></script>

Consider this code (also in 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./ajax/libs/jquery/3.1.1/jquery.min.js"></script>

In Chrome and Firefox, the .css('fontSize') will return 30px, in Edge and IE it's 15px. Why does it do that? The DOM Explorer in Edge even shows the 15px in strikethrough, and therefore should take the inherited 30px as the fontSize:

And the input is rendered with a 30px font, so IE/Edge is picking it up for rendering purposes.

• javascript
• html
• css
• microsoft-edge

• 1 Wele to Stack Overflow! The full content of your question must be in your question, not just linked. Links rot, making the question and its answers useless to people in the future, and people shouldn't have to go off-site to help you. Put a minimal reproducible example in the question, ideally using Stack Snippets (the <> toolbar button) to make it runnable. More: How do I ask a good question? – T.J. Crowder Commented Nov 10, 2016 at 12:53
• 1 mplungjan and I have updated the question inline with the above ^^ – T.J. Crowder Commented Nov 10, 2016 at 12:56
• 1 Sounds like a bug report for either jQuery or Edge. In the meantime, you could try using getComputedStyle(document.getElementById('input')).fontSize and see if it es out right. – Adam Jenkins Commented Nov 10, 2016 at 12:56
• @mplungjan - Let's be sure to keep the version of jQuery the OP used in the fiddle. – T.J. Crowder Commented Nov 10, 2016 at 12:57
• Ah, Good idea. Missed that – mplungjan Commented Nov 10, 2016 at 12:58

2 Answers 2

Update: The bug below is now fixed; FremyCompany says he/she is a program manager from the Edge team and the fix will reach customers in early 2017.

It looks very much like an IE and Edge bug. Not having found it, I reported it.

Here's an update to the snippet that sees what IE/Edge is telling jQuery via getComputedStyle or 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./ajax/libs/jquery/3.1.1/jquery.min.js"></script>

For me, IE11 returns 15px from both getComputedStyle and the Microsoft-specific currentStyle property (it's reassuring that they do at least say the same thing):

So it's not a jQuery bug, it's a Microsoft bug when reporting the size via JavaScript (looks like when inherit is the governing rule), even though it's rendering it correctly.

I tried to find a way to make this a grey area, but couldn't think of anything. For instance, according to the spec, having an input inside a span is entirely valid.

Before I get to the real answer I'd like to dig a little into details.

What is this piece of code doing?

.css();

In the jQuery Docs they tell us:

Get the value of a puted style property for the first element in the set of matched elements or set one or more CSS properties for every matched element.

Furthermore:

The .css() method is a convenient way to get a puted style property from the first matched element, especially in light of the different ways browsers access most of those properties (...)

So what does puted mean?

MDN Docs:

the puted value of a CSS property is puted from the specified value by:

• Handling the special values inherit and initial, and
• Doing the putation needed to reach the value described in the "Computed value" line in the property's summary

Ok, now that part is clear too. Let's get to the real answer:

According to Specifics on CSS Specificity there are css-rules with more 'weight' than others have on an HTML element.

Here is the actual order:

1. Style Attribute
2. ID
3. Class, Pseudo Class Attributes
4. Element

According to that rules your input should've taken the inherited 30px from the Style attribute.

So what is happening in IE11/Edge?

IE11 and Edge are both puting the CSS Rules wrong. If you change your CSS into only this:

span input {
  font-size: inherit;
}

It is starting to work. With the information gathered I am assuming that the JavaScript - Engine of both is puting the real CSS value instead of following the CSS rules order.

I've tried to either change the ID and putting a class on the input but still no luck.

I can remember that IE11 and Edge had some problems with inherited CSS and pseudo classes, maybe it is related to that?

Regards, Megajin