Safari与Chrome兼容性问题

Question

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

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

这是link

p标签的HTML是：

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

CSS是：

{{1}}

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;
}