Safari與Chrome兼容性問題

Question

我是新來的HTML和CSS，當我將我的網站加載到Safari中時，它看起來與我在Chrome中創建的版本不同。我意識到存在諸如跨瀏覽器兼容性問題之類的問題，但我現在對於修復此網站的最佳方式卻很幼稚。

主要問題似乎是絕對定位的div和p標籤以及不在Safari中的正確位置的社交圖標。我希望有人能提供我的建議。在這種情況下，我甚至無法弄清楚Chrome和Safari之間的瀏覽器兼容性問題。感謝您的任何幫助！

這裏是p標籤的link

的HTML是：

<div class="slogan"> 
    <p>Your only trustworthy source on the web for accurate and up-to- date news on the Loch Ness Monster.</p> 
</div> 

而CSS是：

.slogan { 
position: absolute; 
margin-top: 55px; 
margin-left: 170px; 
margin-right: auto; 
font-family: cursive; 
font: 100px; 
text-align: center; 
} 

Answer 1

改變你的CSS添加位置top

.fb { 
    position: absolute; 
    left: 1046px; 
    top: 0; 
} 

.twit { 
    position: absolute; 
    left: 1000px; 
    top: 0; 
} 

更改這個類中刪除margin-top添加top位置

.slogan { 
    font-family: cursive; 
    margin-left: 170px; 
    margin-right: auto; 
    position: absolute; 
    text-align: center; 
    top: 58px; 
}