考虑以下示例：(live demo here)
HTML：
<div>Hello World</div>
CSS：
div {
font-family: monospace;
font-size: 1em;
}
JS：
$(function() {
alert($("div").css("font-size"));
});
在 Firefox 中，字体大小为 16px，而在 IE8 中，字体大小为 13px。
为什么？
（我尝试将font-family更改为Arial，Firefox和IE8都说16px。）
【问题讨论】：
标签： html css fonts cross-browser
每个浏览器都是不同公司的不同产品，他们对产品进行不同的编程，字体大小就是其中之一。 From this link, 1 em 等于当前字体大小，不同浏览器可能不同，用户也可以更改，我在IE中将文本大小改成最大，现在字体大小为21.33 px。
使用 em 表示它依赖于很多东西，使用 %age 来保持一致性。
1 em 对于不同的浏览器会有所不同（取决于它们的默认值或用户已更改它）。例如，您说 IE 的字体大小为 13 px，而 firefox 的字体大小为 16 px，当我检查时，firefox 有 13 px，而 IE 有 16 px，当我将文本大小更改为最大时，它变为 21.33 px（查看 -> 文本大小）
【讨论】：
因为em 是一个相对单位。一个 em 等于当前的字体大小。如果文档的 font-size 为 16pt，则 1 em 等于 16pt。
MSIE 似乎认为monospace 不需要像 Arial 一样大（以像素为单位）即可读取。例如，12pt Times New Roman 大约是 10pt Arial。
如果您想要固定字体大小，请使用font-size: 16pt。
【讨论】：
因为它是一种实现选择。例如，firefox 有一个配置选项来设置 Sans、Serif 和 Monospace 的默认字体和大小。
【讨论】：
因为 Firefox 的开发者搞砸了他们编码“等宽”的方式。要让“monospace”在 Firefox 中正常工作，您需要输入“monospace,;”不是“等宽；”。
我不骗你。就是这么简单的问题。
自己检查一下。更改您的 css 样式，在“等宽”之后和分号之前添加一个逗号，并观察它如何立即改变文本的显示方式。
传统观念是您需要输入“等宽，等宽；”工作，但他们错了。第二个“等宽”没有意义，只有逗号很重要。这实际上意味着您可以在那里放置任何东西并且它会起作用。因此，如果您想在代码中留下一个有趣的复活节彩蛋，您可以执行类似“monospace, hellofromthecoder;”之类的操作。如果没有额外的文字改变任何东西，它会运行得非常好。
【讨论】：
monospace, serif; 而不是monospace,;。在后一种情况下，浏览器无法识别字体系列。