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

此问题基本上是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让它排队尽可能精确60px高大的Chrome（从而给了我一个完美60px高大的内联元素，让我和可靠的垂直居中），但是这是具体的不仅是浏览器，但对电脑。

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

来源

2014-12-05 brentonstrine

您是否试图获得一致的线高度或字体高度？ – Alohci 2014-12-05 01:32:50

线高，我猜。真的，我希望一切都保持一致。 – brentonstrine 2014-12-05 01:51:29

这个以前的问题可能有助于http://stackoverflow.com/questions/10665541/different-line-height-in-firefox-and-chrome-when-using-text-shadow – andyb 2014-12-05 14:38:36

如果您尝试

font-size: 3.29em;

是否跨浏览器的工作？

来源

2014-12-05 01:41:19 SomeGuy

不可以。：D它一直减少/增加字体大小。这只有在浏览器之间不一致地应用*时，才能正确反转*与浏览器之间的行高不一致。 – brentonstrine 2014-12-05 02:40:22

每个浏览器都有自己的预设样式，您可能需要重写。设置这在你的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; 
}

然后，然后风格，但你希望之后。

来源

2014-12-05 01:48:16 sabaeus

我熟悉CSS规范化器。实际上，JSFiddle内置了一个。[This]（http://jsfiddle.net/brentonstrine/gys9neme/7/）就是CSS规范化后的样子。实际上并没有解决这个问题。 – brentonstrine 2014-12-05 01:53:37

我在按钮和输入字段中包含的文本有类似的问题。如果您像使用Fontsquirrel一样使用网络字体服务，请确保在专家模式下检查字体优化选项“垂直指标”为“无调整”。 Fontsquirrel的默认设置似乎弄糟了这些东西。

来源

2018-01-21 17:52:00 wolfitoXtreme

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

回答

相关问题