4

我在这里放了一个小测试用例：

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

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

  • * （一切）：12px
  • 容器：20px
  • 测试元素：inherit

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

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

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

4

1 回答 1

2

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

这样做的原因是因为我发现这inherit似乎在 IE 中存在问题。当我查看 IE9 时，它呈现得很好，但是由于某种原因testEl.currentStyle.fontSize，$(testEl).css('font-size')两者都返回了 12px。

我已经读过要使用字体大小：在 IE8 中继承，您需要指定一个！DOCTYPE，但是在 IE9 中应该没问题（http://www.w3schools.com/cssref/pr_font_font-size.asp） . 出于某种原因，testEl.currentStyle.fontSize并$(testEl).css('font-size')没有在 IE9 中获取正确的值。

当您将字体大小设置为 1em 时，您将其大小调整为父字体大小的 100%，在本例中为 20 像素。来自http://www.w3schools.com/cssref/css_units.asp：

1em 等于当前字体大小。2em 表示当前字体大小的 2 倍。例如，如果一个元素以 12 pt 的字体显示，那么 '2em' 就是 24 pt。'em' 在 CSS 中是一个非常有用的单位，因为它可以自动适应读者使用的字体

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

希望这可以帮助！

于 2013-02-14T19:18:50.780 回答