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中已经提到的那样，这看起来不错： Safari屏幕快照

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

我已经使用CSS检查器检查了两个浏览器： 在此处输入链接描述

“错误”似乎很明显，但我现在无法告诉您如何解决。 我已经尝试了对h1标签本身以及div标签的宽度高度进行的一些更改。 有人可以帮我吗？

干杯

Answer 1

我遇到了一个更好的IMO。 在Google Chrome浏览器中使用元素检查器时，我注意到检查器告诉我的各种CSS规则面板要么适用于我的H标签内容，要么不适用于我的H标签内容，其中有一个CSS规则并非来自我自己的CSS设置，其称为“用户代理样式表” 。

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

甚至不需要我为它编码就可以实现其中的价值。 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;