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;
}

在Firefox中，所有情况下60px都很高。在Chrome中，文字高度实际上高于60px（有时为69px，有时为其他值。）

我可以将font-size缩减为52px，使其与Chrome中的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等Web字体服务，请确保在专家模式下检查字体优化选项“垂直度量标准”到“无调整”。 Fontsquirrel默认似乎搞砸了这些东西。

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

3 个答案: