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不同

回答

相关问题