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

【问题标题】：How to get consistent line-heights between browsers如何在浏览器之间获得一致的行高
【发布时间】：2015-02-03 02:12:47
【问题描述】：

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

看看this JSFiddle。它将容器设置为 60 像素高。

.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，而且特定于计算机。

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

【问题讨论】：

您是否要获得一致的行高或字体高度？
行高，我猜。我真的希望一切都保持一致。
上一个问题可能对stackoverflow.com/questions/10665541/…有帮助

标签： html css fonts font-size

【解决方案1】：

如果你尝试

font-size: 3.29em;

这可以跨浏览器工作吗？

【讨论】：

不。 :D 它一致地减少/增加字体大小。这只有在 ems 在浏览器之间的应用不一致与浏览器之间的行高不一致时才有效。

【解决方案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;
}

然后按你的意愿设计样式。

【讨论】：

我熟悉 CSS 规范化器。事实上，JSFiddle 有一个内置的。This 是 CSS 规范化后的样子。实际上并不能解决问题。

【解决方案3】：

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

【讨论】：