如何在瀏覽器之間獲得一致的行高

此問題基本上是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

如何在瀏覽器之間獲得一致的行高

回答

相關問題