Geek Answers Handbook

Error reading IE inherited font size from computed style (currentStyle) is incorrect

I put a small test case here:

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

I basically have the following font sizes set:

  • * (all): 12px
  • container: 20px
  • test item: inherit

DOM hierarchy: container> test item.

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

Are there any workarounds for this problem? Or did I do something really stupid?

+4
source share
1 answer

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

The reason for this is because I found that inherit seems to have problems in IE. This looked great when I looked in IE9, however for some reason testEl.currentStyle.fontSize and $(testEl).css('font-size') both returned 12px.

I read that to use font-size: inherit in IE8 you need to specify a! DOCTYPE, however, 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') not picking the right values ​​in IE9.

When you set the font size to 1em, you define it to 100% of the original font size, which in this case results in 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. For example, if an element is displayed with a font of 12 pt, then "2em" is equal to 24 pt. "Em" is a very useful unit in CSS, as it can automatically adapt to the font the reader uses.

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

Hope this helps!

+2
source

More articles:


All Articles