javascript - IE 从计算样式 (currentStyle) 读取继承的字体大小不正确

Question

我在这里整理了一个小测试用例:

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

基本上我设置了以下字体大小:

• *(所有内容):12px
• 容器:20px
• 测试元素:继承

DOM 层次结构是:容器> 测试元素。

在 IE9 中，字体大小使用 testEl.currentStyle.fontSize 报告为 12px，但显示为 20px。在 Chrome 和 FF 中似乎没问题。

这个问题有什么解决方法吗？还是我做了一些非常愚蠢的事情？

Answer 1

尝试使用 font-size: 1em 而不是使用 inherit。

这是因为我发现 inherit 在 IE 中似乎有问题。当我在 IE9 中查看时它呈现良好，但是由于某种原因 testEl.currentStyle.fontSize 和 $(testEl).css('font-size') 都返回 12px 作为好吧。

我读过要在 IE8 中使用 font-size: inherit，您需要指定一个 !DOCTYPE，但它在 IE9 中应该没问题(http://www.w3schools.com/cssref/pr_font_font-size.asp)。出于某种原因，testEl.currentStyle.fontSize 和 $(testEl).css('font-size') 没有在 IE9 中获取正确的值。

当您将字体大小设置为 1em 时，您会将其调整为父字体大小的 100%，在本例中为 20px。来自 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

因此，computedStyle.fontSize 和 $(testEl).css('font-size') 都应该返回 20px。

希望这对您有所帮助!