这是一个演示网站: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-size
和font-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; }