Firefox的呈现方式与Safari / Chrome不同

Question

我花了一些好时间调试自己，花了一些好时间进行研究，但似乎没有什么能解决我的问题。 我的标题中有一个标题，该标题应该在底部被截断，在Safari和Chrome中看起来不错，但是在Firefox中，它的位置要高得多：

第一个窗口： Firefox

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

我花了大约一个半小时来更改CSS中的所有内容，以为它与周围的其他元素有关，但是没有取得任何进展。 最后，我决定制作一个极其简化的版本，以查看问题所在：

第一个窗口： Firefox

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

完全一样。 我应用了CSS重置，所以这不是问题。 我试过设置line-height ，但这并没有解决。 我已经尝试了CSS display属性的每个值。 没有什么可以解决这个问题。

以上测试示例的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样式表
• 简而言之，我需要弄清楚如何让两个浏览器以完全相同的高度显示文本

Answer 1

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

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

* {line-height:inherit;}

Answer 2

尝试在样式表中指定一个字体系列，尽管它不是像素完美的

Answer 3

即使您使用webfont并定义了元素的行高，由于其他元素的行高也会有所不同。

对我来说，有效的方法是使用webfont在顶部定义正文的行高。

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

body{
    line-height: 1;
}