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

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

Answer 2

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

line-height 必须在 h1 上设置，除非你有类似的东西

* {line-height:inherit;}

Answer 3

即使您使用网络字体并定义元素的行高，您也可能会因其他元素的行高而有所不同。

对我有用的是在使用网络字体的顶部定义正文的行高。

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

body{
    line-height: 1;
}