更新：使用 normalize.css添加了简单的测试示例http://jsfiddle.net/7UhrW/1/ 。
Chrome/WebKit 和 Firefox 具有不同的渲染引擎，它们以不同的方式渲染字体，尤其是不同尺寸的字体。这并不太令人惊讶，但令人惊讶的是一些差异的大小。
我总是可以将页面上的单个元素调整为更相似，但至少可以这么说，这很乏味。我一直在寻找更系统的解决方案，但许多资源（例如 SO 答案）只是说“使用重置包”。虽然我确信这可以解决许多其他问题，例如填充和间距，但它似乎对字体尺寸没有任何影响。
例如，如果我从http://html5reset.org/获取重置包，我可以显示出相当大的差异（注意检查器中显示的布局尺寸）。[下面的图像实际上比此答案中显示/调整大小的分辨率更高-例如，在 Chrome 中，您可以右键单击并在新选项卡中打开图像。]
<h1 style="font-size:64px; background-color: #eee;">Article Header</h1>
使用 Helvetica，Chrome 的高度反而更短。
<h1 style="font-size:64px; background-color: #eee; font-family: Helvetica">Article Header</h1>
使用不同的字体，Chrome 再次渲染出更高的字体，但另外字母间距变得混乱（可能是由于字体的粗体）：
<style>
@font-face {
font-family: "MyriadProRegular";
src: url("fonts/myriadpro-regular-webfont.eot");
src: local("?"), url("fonts/myriadpro-regular-webfont.woff") format("woff"), url("fonts/myriadpro-regular-webfont.ttf") format("truetype"), url("fonts/myriadpro-regular-webfont.svg#webfonteknRmz0m") format("svg");
font-weight: normal;
font-style: normal; }
@font-face {
font-family: "MyriadProLight";
src: url("fonts/myriadpro-light-webfont.eot");
src: local("?"), url("fonts/myriadpro-light-webfont.woff") format("woff"), url("fonts/myriadpro-light-webfont.ttf") format("truetype"), url("fonts/myriadpro-light-webfont.svg#webfont2SBUkD9p") format("svg");
font-weight: normal;
font-style: normal; }
@font-face {
font-family: "MyriadProSemibold";
src: url("fonts/myriadpro-semibold-webfont.eot");
src: local("?"), url("fonts/myriadpro-semibold-webfont.woff") format("woff"), url("fonts/myriadpro-semibold-webfont.ttf") format("truetype"), url("fonts/myriadpro-semibold-webfont.svg#webfontM3ufnW4Z") format("svg");
font-weight: normal;
font-style: normal; }
</style>
...
<h1 style="font-size:64px; background-color: #eee; font-family: Helvetica">Article Header</h1>
如果我们尝试添加 unitless * { line-height: 1; }，正如评论所建议的那样，我们会看到虽然它确实产生相同的高度，但垂直偏移量是不同的，页面上的其他元素也是如此：
我尝试了一些重置/规范化包无济于事。我只是想在这里确认这确实是生活中的事实（甚至省略了像 IE 和移动设备这样更明显的违规者），而且我不会错过一些超级棒的解决方案来解决这个烂摊子。