所有将'body'字体应用于'p'(段落)的浏览器,Internet Explorer 除外



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

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

"

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

查看CSS,我没有看到明显的问题,除非我完全错过了什么。那么,会是什么呢?(这是我第一次遇到这样的错误。

好吧,

这听起来可能很愚蠢,但问题是,Internet Explorer 9 恰好是唯一支持其家族(旧版本的 IE)rem又名root em字体大小值的浏览器),在使用 rem 时不支持 font CSS 属性。

因此

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-sizefont-family属性时,上面的小提琴在使用rem时似乎很好:http://jsfiddle.net/SBrda/5/

希望这对:D有所帮助

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; }

最新更新