OSX上的Safari奇怪地呈现margin-top答案

【问题标题】：Safari on OSX renders margin-top strangelyOSX上的Safari奇怪地呈现margin-top
【发布时间】：2017-12-01 23:07:01
【问题描述】：

我在 OSX 机器上的 Safari 上有一个奇怪的行为。所有父母似乎都继承了孩子的margin-top：

父级到顶部的间距相同：

这会导致页面顶部有一个空间。

这只发生在 Safari / OSX 上，移动版 Safari 没有问题，FF 或 OSX 上的 Chrome 也没有。

提前谢谢你

【问题讨论】：

【解决方案1】：

我发现 Safari 为我的网页添加了不需要的边距/间距。最好的办法是把它放在样式表的顶部：

* {
    margin:0;
    padding:0;
}

这将告诉浏览器重置任何浏览器样式的内边距和边距。

【讨论】：

【解决方案2】：

我通过添加一个行高为 0px 的 div 解决了这个问题：

<div class="off-canvas-content" data-off-canvas-content="">
        <div class="safarifix" style="line-height: 0px;">&nbsp;</div>

这似乎改变了画布外内容的状态，使其拥有自己的定位。事实上，它现在可以工作了！

【讨论】：