如何在浏览器之间获得一致的行高

Question

这个问题基本上是this one about an issue I was having with vertical centering的一个扩展。找到这个问题的答案就产生了对这个问题的需求。

看看this JSFiddle吧。它设置了一个60px高的容器。

.container {
    background-color: lightgreen;
    height: 60px;
    max-height: 60px;
    line-height: 60px;
    font-size: 60px;
}

在火狐中，它在所有情况下都是60px高的。在Chrome中，文本高度实际上比60px高(有时是69px，有时是其他值)。

我可以将font-size减少到52px，让它在Chrome中排成60px 60px (这样我就有了一个完美的60px高的内联元素，并允许我可靠地垂直居中)，但这不仅是Chrome特有的，也是电脑特有的。

如何获得一致的字体高度？

Answer 1

如果你尝试

font-size: 3.29em;

它能跨浏览器工作吗？

Answer 2

每个浏览器都有自己的预设样式，您可能需要覆盖这些样式。在css的顶部设置此选项，以删除任何默认值：

html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, em, img, strong, sub, sup, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figure, figcaption, footer, header, hgroup, 
menu, nav, output, section, time {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

然后随心所欲地设计样式。

Answer 3

对于按钮和输入字段中包含的文本，我也遇到了类似的问题。如果你正在使用像Fontsquirrel这样的网络字体服务，就像我一样，确保你在专家模式下将字体优化选项“垂直度量”选为“无调整”。Fontsquirrel的默认设置似乎把这些事情搞得一团糟。