css - 所有将“body”字体应用于“p”（段落）的浏览器，Internet Explorer 除外

Question

这是一个演示网站：http ://reddledemo.wordpress.com （不，这不是与 WordPress 相关的问题。）

我注意到，除了 Internet Explorer（在 IE9 上测试）之外，该页面的内容在所有现代浏览器（基本上是最新版本的 Chrome、FireFox、Safari、Opera）中都出现在“无衬线”字体系列中。

“body”标签有一个定义的字体，当它们继承样式时，它应该自动应用于菜单和“p”段落。但是在给定的示例中，这并没有发生。

查看 CSS，我没有发现明显的问题，除非我完全遗漏了一些东西。那么，它可能是什么？（这是我第一次遇到这样的错误。）

score 4 · Accepted Answer

好吧，这听起来可能很愚蠢，但事实是，Internet Explorer 9 恰好是其家族中唯一支持remaka font-size 值的浏览器（旧版本的IE ），在使用.root emfontrem

因此，

font: 1.3rem Verdana, sans-serif;

应该在您的样式表中显示为（如下）：

font-size: 1.3rem;
font-family: Verdana, sans-serif;

不用说，rem只有少数现代浏览器支持，IE 9 就是其中之一（除了这个错误）。

概念证明 (wrt IE9):

这个小提琴工作正常，我没有使用rem：http: //jsfiddle.net/SBrda/3/
rem当使用而不是：http em: //jsfiddle.net/SBrda/4/时，相同的小提琴不能正常工作
当我将font属性分解为font-size和font-family属性时，上面的小提琴似乎在使用时渲染得很好：http rem: //jsfiddle.net/SBrda/5/

希望这会有所帮助：D

score 1 · Accepted Answer

IE 9rem一般支持该单位，但不是font简写形式。演示：

<!doctype html>
<style>
p { font: 1.35rem Courier; }
</style>
<p>Hello world

IE 9 忽略整个规则，使用其默认字体大小和默认字体系列。所以它的解析例程中显然存在一个错误，导致它在rem这里被视为无法识别，因此丢弃了该规则。

如果您将速记 CSS 规则拆分为两个规则，它会起作用：

p { font-size: 1.35rem; font-family: Courier; }

2 回答 2