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

【问题标题】：All browsers applying 'body' font to 'p' (paragraphs), except Internet Explorer所有将“body”字体应用于“p”（段落）的浏览器，Internet Explorer 除外
【发布时间】：2012-05-04 17:09:54
【问题描述】：

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

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

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

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

【问题讨论】：

将所需的字体系列也添加到 P 中
@palsingh 但这不是必需的。 “p”应该从“body”继承样式。
你正在使用reset css，可能是这个原因，所以你必须声明P的规则
@palsingh 我的理解是如果'reset' css导致了这个问题，在其他浏览器中也应该是可见的。
我不确定，但我确信永远不要将 IE 与 firefox 或 chrome 进行比较

标签： css internet-explorer fonts inheritance

【解决方案1】：

好吧，这听起来可能很愚蠢，但问题是 Internet Explorer 9，它恰好是其家族中唯一支持 rem aka root em font-size 值的浏览器（旧版本的 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）：

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

希望这会有所帮助：D

【讨论】：

是的，是 rem 使以前版本的 IE 出错。不过，我相信它应该可以在 IE9 中使用。
@BoltClock'saUnicorn 但我也为 IE 提供了一个后备。我已经使用了 font: 13px Arial,sans-serif; 和 font: 1.3rem Arial,sans-serif; 。是的，rem 据说可以在 IE9 中工作。所以，问题可能是别的，IMO。还在想办法……
@Pankaj rem 不是错字。这是故意的。 Read this。基本上它代表“root em”
是的，我发现 :D 并删除了 AsaP
@geekpanth3r 看到这个：csswizardry.com/2011/05/font-sizing-with-rem-could-be-avoided

【解决方案2】：

IE 9 通常支持rem 单位，但不支持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; }

【讨论】：

Pankaj 上面的回答已经证实了这一点。不过感谢您的回答。 :)
唯一的错误是，IE 无法自动找到计算rem 的值。如果您只是声明<!DOCTYPE html>，我的答案在 IE 中运行良好。
@Teemu 你可以展示一个很容易证明的工作小提琴:)