Safari/Firefox 中不同的 H1 CSS 高度

Question

我最近创建了一个启动画面，它可以在 Safari 中进行动画处理并且运行良好。 html代码如下所示：

<div id="logo">
    <div id="janik"><h1>Janik</h1></div>
    <div id="lipke"><h1>lipke</h1></div>
    <div id="tog_design"><h2>Photography and Webdesign</h2></div>
</div>  

CSS：

#logo{
top: 40%;
width: 570px;
height: 180px;
margin-left: auto;
margin-right: auto;
/*margin-top: -150px;*/
position: relative;
cursor: pointer;
}

#janik{
width: 300px;
height: 117px;
overflow: hidden;
left: 0;
position: absolute;
}

#janik h1 {
margin: 0;
font-family: Helvetica;
font-weight:normal;
font-size: 142px;
letter-spacing: -8px;
color: #3a3e40;
}

#lipke{
width: 265px;
height: 117px;
overflow: hidden;
left: 295px;
position: absolute;
}

#lipke h1{
margin: 0;
font-family: Helvetica;
font-weight:normal;
font-size: 142px;
letter-spacing: -8px;
color: #4b7586;
}

#tog_design{
text-align: center;
width: 560px;
height: 50px;
position: absolute;
top: 117px;
}

正如我在 Safari 中已经提到的，这看起来不错： Screenshot Safari

但在 Firfefox 中，H1 标签的高度似乎不同，因此文本没有像 Safari 中那样被屏蔽，正如我所期望的那样。

我已经使用 CSS Inspector 检查了两个浏览器： enter link description here

“错误”似乎很明显，但我现在不知道如何解决。 我已经尝试了对 h1 标签本身以及 div 标签的宽度高度的一些更改。 有人可以帮我解决这个问题吗？

干杯

Answer 1

我遇到了一个更好的修复 IMO。 使用 Google Chrome 中的元素检查器，我注意到在检查器告诉我的各种 CSS 规则面板中应用或未应用到我的 H 标记内容，有一个 CSS 规则不是来自我自己的 CSS 设置，它被称为 “用户代理样式表”。

这是一个实际浏览器根据元素（H 标签）的 html 设置 CSS 规则值的示例。在我的示例中，它位于该域的主页上：http://myrentals-keywest.com/，CMS 使用

呈现 H4 标记

值在它里面，我什至没有为它编码。 Firefox 和 Chrome 有一个设置来添加 CSS 规则到

在 H4 标签内增加元素高度值的值如下：

    p {
display: block;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
}

所以我找到了增加的高度是从哪里来的。我修复这个在 Safari 或 Internet Explorer 浏览器中没有任何不良影响的方法是将以下规则添加到我的 CSS 文件中以覆盖用户代理规则：

h4 p {
    -webkit-margin-before: 0em;
    -webkit-margin-after: 0em;
}

我对您的建议是，使用相同的方法来确定哪些用户代理规则正在影响您在某些浏览器中的所需布局，然后通过复制用户代理规则但更改来覆盖您自己的 CSS 文件中特定元素的规则它的设置符合您最初的计划。

有关用户代理规则的详细概述和我自己的取消用户代理的覆盖，请参阅屏幕截图：)

Answer 2

不同的浏览器以不同的方式处理 H1 标签。 您可以通过使用 line-height css 属性来指定确切的行高来解决此问题。

line-height: 20px;