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

这个问题基本上是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，但适用于计算机。

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

最佳答案

如果你试试

font-size: 3.29em;

跨浏览器能用吗？

关于html - 如何在浏览器之间获得一致的行高，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27306894/