请看下面的例子：（live demo here）为什么字体在平台上看起来不同？
HTML：
<label>Name</label>
CSS：
label {
font-family: serif;
font-size: 16px;
}
JS：
$(function() {
console.log($("label").width());
});
当我运行Windows 7的这个例子与火狐，结果是38。但是，当我在Ubuntu上使用Firefox（使用VirtualBox）运行相同的示例时，结果为48。在这两种情况下，Firefox版本都是7.0.1。
这是什么区别？我怎么能使这是相同的？
您没有指定实际的字体; “serif”只是任何带衬线的字体的元名称，并且浏览器在不同的平台和浏览器上会有不同的默认值。
但是，即使您指定了任何平台上可能存在的字体（如core fonts for the web中的字体），由于字体渲染不同，结果仍可能不一样;窗口字体渲染确实有很强的字体提示（尽可能地强制字母形式进入像素网格），而Mac OS和Gnome等则使用了不太积极的暗示。即使使用相同的字体和大小，此效果可能会导致文本的宽度随几个像素而变化。
为了避免使用固定布局时的布局问题，您应该始终将至少10-20像素（对于相当短的文本）至少设置为宽度以避免包装或溢出。
字体渲染和大小对平台非常具体。您可能想尝试一种您知道在所有系统上都可用的字体，而不是使用像“serif”这样的通用字体。 Arial也许？看看你的号码是否匹配。
此外，您可能会看到浏览器之间的一些差异，因为像素字体大小也可能会有所不同。您可能希望查看CSS重置以帮助缓解该问题。
也有，在某些浏览器，用户定义的字体大小。因此，您可能需要检查每个浏览器以确保字体大小的设置相同。 （这就是为什么我喜欢使用ems，而不是字体大小的px。）
将'serif'更改为'Arial'解决了这个问题。 –