Firefox的渲染效果與Safari/Chrome不同

我花了好幾個小時來調試自己，還有好幾個小時的研究，但似乎沒有什麼能解決我的問題。我有我的頭的標題是應該在底部，它看起來在Safari和Chrome罰款被切斷，但在Firefox它的位置要高得多：Firefox的渲染效果與Safari/Chrome不同

第一窗口：火狐

第二窗口： Safari瀏覽器（鉻呈現相同）

enter image description here

我花了大約一個半小時在我的CSS中改變了一切，認爲它與周圍的其他元素有關，但沒有取得任何進展。最後，我決定做一個非常簡化的版本，看看是什麼問題：

第一窗口：火狐

第二個窗口： Safari瀏覽器（Chrome瀏覽器呈現相同）

enter image description here

一樣的東西。我有一個CSS重置應用，所以這不是問題。我試過設置line-height，但那並沒有解決它。我已經嘗試CSS顯示屬性的每個值。沒有什麼解決這個問題以上測試例如

HTML/CSS：

<div class="test"> 
    <h1>Test</h1> 
</div>

.test { 
    margin: 0; 
    padding: 0; 
    width: 100%; 
    height: 185px; 
    line-height: 185px; 
    border: 1px solid red; 
} 

.test h1 { 
    font-size: 12em; 
}

我的網站可以在samrapdev.com觀看。
快速鏈接CSS stylesheet
總之，我需要弄清楚如何讓這兩個瀏覽器在完全相同的高度顯示文字

來源

2013-11-28 samrap

http://stackoverflow.com/questions/11713163/css-text-padding-difference-firefox -vs-chrome-and-others – Sico

您的網站使用響應式佈局。在更改瀏覽器的大小時，文本的基線會發生變化。你注意到了嗎？ –

我已經看到了@Sico沒有解決我的問題的問題 – samrap

嘗試並在樣式表中指定字體系列，儘管它不是像素完美的 enter image description here

來源

2013-11-28 00:41:28

確切！ OP需要使用Web字體，因爲在Mac上，標題將使用helvetica顯示，在窗口上顯示爲字體。字體相似但不相同 – 2013-11-28 00:48:07

main.css中有一條第一行 – samrap

那麼爲什麼Mac上的Firefox看起來與Mac上的Safari/Chrome不同呢？ @Wesabi – samrap

#header .youAreHere h1 
{ 
    ... 
    line-height:1; 
}

的line-height必須在H1設置，除非你有像

* {line-height:inherit;}

proof

來源

2013-11-28 00:36:07

也像素完美http://i.imgur.com/MeXJflV.jpg – 2013-11-28 00:40:10

我改變了行高爲137像喜歡你的例子，但它仍然渲染更高在Firefox中 – samrap

閱讀Alexander Kimaru的答案，您可能需要爲所有系統使用相同的Web字體（http://www.google.com/fonts）而不是「helvetica，arial，sans-serif」 – 2013-11-28 00:50:07

即使您採用webfont並定義元素的行高，也可以因其他元素的行高而產生變化。

對我而言，有效的方法是在使用webfont的頂部定義身體的線高。

另外，不要忘記爲您正在使用的所有元素重置邊距和填充。一個好的技巧是你的實際樣式表之前使用reset.css（你可以找到一些在http://www.cssreset.com/）

body{ 
    line-height: 1; 
}

來源

2014-02-19 11:36:38 quasi

感謝您的信息，我實際上已經在我的網站中使用了精確的重置樣式表！ – samrap

（eric meyer的一個） – samrap

Firefox的渲染效果與Safari/Chrome不同

回答

相關問題