Safari 与 Chrome 的兼容性问题答案

【问题标题】：Safari vs. Chrome Compatibility IssuesSafari 与 Chrome 的兼容性问题
【发布时间】：2015-12-14 13:53:49
【问题描述】：

我是 html 和 css 的新手，当我将我的网站加载到 Safari 中时，它看起来与我在 Chrome 中制作的版本不同。我知道存在诸如跨浏览器兼容性问题之类的问题，但是对于现在修复此站点的最佳方法，我很天真。

主要问题似乎是绝对定位的 div 和 p 标签，以及不在 Safari 中正确位置的社交图标。我希望有人能给我建议。在这种情况下，我什至无法弄清楚 chrome 和 safari 之间的浏览器兼容性问题是什么。感谢您的帮助！

这里是link

p 标签的 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;
}

【问题讨论】：

【解决方案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;
}

【讨论】：