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标签似乎有不同的高度，因此Text不像我想的那样被屏蔽。

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

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

干杯

Answer 1

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

这是实际浏览器根据元素的html（H标记）设置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;