css - 将 'body'字体应用到 'p'(段落)的所有浏览器，Internet Explorer除外

Question

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

我注意到，除 Internet Explorer(已在 IE9 上测试)外，该页面的内容在所有现代浏览器(基本上是最新版本的 Chrome、FireFox、Safari、Opera)中都显示为“sans-serif”字体系列。

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

查看 CSS，我没有发现任何明显的问题，除非我完全遗漏了什么。那么，它会是什么呢？ (第一次遇到这种bug。)

Answer 1

好吧，这听起来可能很愚蠢，但事实是，Internet Explorer 9 恰好是唯一支持 rem 的浏览器，也就是 root em 中的字体大小值family(旧版本的 IE)，不支持 font CSS 属性 当使用 rem 时。

因此，

font: 1.3rem Verdana, sans-serif;

在您的样式表中应如下所示:

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

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

概念验证(w.r.t IE9):

• 这个 fiddle 工作正常，我没有使用 rem :http://jsfiddle.net/SBrda/3/

• 当使用 rem 而不是 em 时，相同的 fiddle 无法正常工作:http://jsfiddle.net/SBrda/4/

• 当我将 font 属性分解为 font-size 和 font-family 属性时，上面的 fiddle 似乎呈现使用 rem 时很好:http://jsfiddle.net/SBrda/5/

希望这会有所帮助:D