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;