Question

I’ve put a little test case together here:

http://jsfiddle.net/D4sLk/2/

Basically I have the following font sizes set:

• * (everything): 12px
• container: 20px
• test element: inherit

The DOM hierarchy is: container > test element.

In IE9, the font size is reported as 12px using testEl.currentStyle.fontSize but is displayed as 20px. In Chrome and FF it seems fine.

Are there any workarounds to this issue? Or have I done something really stupid?

Answer 1

Try using font-size: 1em instead of using inherit.

The reason for this is because I’ve found that inherit seems to have issues in IE. It rendered fine when I looked in IE9, however for some reason testEl.currentStyle.fontSize and $(testEl).css('font-size') both returned 12px as well.

I’ve read that to use font-size: inherit in IE8, you would need to specify a !DOCTYPE, however it should be fine in IE9 (http://www.w3schools.com/cssref/pr_font_font-size.asp). For some reason, testEl.currentStyle.fontSize and $(testEl).css('font-size') are not picking up the correct values in IE9.

When you set the font-size to 1em, you are sizing it up to 100% of the parent font-size, which in this case results to 20px. From http://www.w3schools.com/cssref/css_units.asp:

1em is equal to the current font size. 2em means 2 times the size of the current font. E.g., if an element is displayed with a font of 12 pt, then ‘2em’ is 24 pt. The ’em’ is a very useful unit in CSS, since it can adapt automatically to the font that the reader uses

As a result, computedStyle.fontSize and $(testEl).css('font-size'), should both return 20px.

Hope this helps!