为什么有些浏览器的字体大小不一致？
考虑以下示例：（现场演示）
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。）
Consider the following example: (live demo here)
HTML:
<div>Hello World</div>
CSS:
div {
font-family: monospace;
font-size: 1em;
}
JS:
$(function() {
alert($("div").css("font-size"));
});
In Firefox, the font size is 16px, while in IE8 the font size is 13px.
Why ?
(I tried to change the font-family to Arial, and both Firefox and IE8 say 16px.)
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
每个浏览器都是不同公司的不同产品，他们对产品的编程也不同，字体大小就是其中之一。 从此链接， 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（查看 ->文字大小）
Each browser is a different product by a different company, they program their product differently, and font size is one of them. From this link, 1 em is equal to the current font size, which maybe different for different browsers, also user can change it, i have changed the text size to largest in IE, and the font size is now 21.33 px.
Using em means it is dependent on a lot of things, use %age for consistency.
1 em will be different for different browsers (depending on their default or of user has changed it). For example you said IE has font size of 13 px and firefox has 16 px, when i checked, firefox had 13 px and IE has 16 px, which was changed to 21.33 px when i changed the text size to largest (view -> text size)
因为
em是一个相对单位。 em 等于当前字体大小。如果文档的字体大小为 16pt，则 1 em 等于 16pt。MSIE 似乎认为
monospace不需要像 Arial 一样大（以像素为单位）才可读。例如，12pt Times New Roman 大约与 10pt Arial 一样大。如果您想要固定字体大小，请使用
font-size: 16pt。Because
emis a relative unit. An em is equal to the current font-size. If the font-size of the document is 16pt, 1 em is equal to 16pt.MSIE seems to think that
monospacedoesn't need to be as big as Arial (in pixels) to be readable. For example, 12pt Times New Roman is about a big as 10pt Arial.If you want fixed font sizes, use
font-size: 16pt.因为它是一个实现选择。例如，Firefox 有一个配置选项来设置 Sans、Serif 和 Monospace 的默认字体和大小。
Because its an implementation choice. For instance, firefox has a configuration option to set the default font face and sizes for Sans, Serif and Monospace.
因为 Firefox 开发者搞砸了“等宽”的编码方式。要让“monospace”在 Firefox 中正常工作，您需要输入“monospace,;”不是“等宽；”。
我没有骗你。问题就是这么简单。
亲自检查一下。更改您的 css 样式，在“等宽”之后和分号之前添加一个逗号，并观察它如何显着地立即改变文本的显示方式。
传统观念是你需要输入“等宽，等宽；”去工作，但他们错了。第二个“等宽”毫无意义，只有逗号重要。这实际上意味着你可以在那里放任何东西并且它会起作用。因此，如果您想在代码中留下一个有趣的复活节彩蛋，您可以执行类似“monospace, hellofromthecoder;”的操作。如果没有额外的文本改变任何东西，它就能完美地工作。
Because Firefox builders messed up in how they coded "monospace". To get "monospace" to work properly in Firefox you need to type "monospace,;" not "monospace;".
I kid you not. It is that simple of a problem.
Check it out for yourself. Change your css style to have a comma after the "monospace" and before the semicolon and watch how dramatically it instantly changes the way that text appears.
Conventional belief was that you needed to have it type "monospace, monospace;" to work but they were wrong. That second "monospace" was meaningless, only the comma mattered. Which actually means you could have put anything there and it would have worked. So if you wanted to leave a funny easter egg in your code you could do something like "monospace, hellofromthecoder;" and it would function perfectly fine without that extra bit of text changing anything.