Firefox的渲染方式与Safari / Chrome不同

Question

我花了几个小时调试自己，并花了几个小时研究，但似乎没有解决我的问题。我的标题中有一个标题，应该在底部被截断，在Safari和Chrome中看起来很好，但在Firefox中它的定位要高得多：

  

    

第一个窗口： Firefox

         

第二个窗口： Safari（Chrome渲染相同）

  

我花了大约一个半小时改变我的CSS中的一切，认为它与周围的其他元素有关，但没有取得进展。最后，我决定制作一个极其简化的版本，看看问题是什么：

  

    

第一个窗口： Firefox

         

第二个窗口： Safari（Chrome渲染相同）

  

同样的事情。我应用了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
的快速链接
• 简而言之，我需要弄清楚如何让两个浏览器以完全相同的高度显示文本

Answer 1

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

必须在h1上设置行高，除非你有类似

的内容

* {line-height:inherit;}

Answer 2

尝试在样式表中指定font-family，尽管它不是像素完美

Answer 3

即使您使用webfont并定义元素的行高，也可能因其他元素的行高而有变化。

对我来说有用的是使用webfont定义主体的行高。

另外，不要忘记重置您正在使用的所有元素的边距和填充。一个好方法是在实际样式表之前使用reset.css（你可以在http://www.cssreset.com/找到一些）

body{
    line-height: 1;
}