Safari 中的边距顶部与 chrome 不同

Posted 2023-03-06

【中文标题】Safari 中的边距顶部与 chrome 不同

【英文标题】：Margin top different in safari than chrome

【发布时间】：2018-07-13 11:05:00

【问题描述】：

一个 bug 已经爬了进来，我不知道它是从哪里来的。任何帮助将不胜感激。

如果您在 Chrome 中查看 [removed]，您会发现导航菜单左侧的徽标很好地位于菜单的垂直中心。但是如果你在 Safari 中打开它，它的显示会有所不同。它与菜单顶部对齐。

在 Safari 中添加负边距顶部来补偿会在 Chrome 中搞砸。

任何想法如何解决这个问题？

【问题讨论】：

我个人会重新编码，它有点乱。不要使用多个 div 来尝试实现您的情况，而是放置一个包含徽标和导航的 header，然后在其顶部放置一个边距以获得间距

我也是为了重新编码。使用浮动进行布局总是有问题，在 2018 年没有理由这样做。

你的布局很奇怪。我想您的问题与#above-navbar div 有关。您有 3 个 .column 浮动 div，然后是一个常规的非浮动 div (#above-navbar)，没有内容，并且它们之间有很大的空白。 <center> 标签也被弃用了。

@dave Bootstrap 3 不使用浮动进行布局吗？这可能是最流行的css网格框架

这就是我需要的所有鼓励。你完全正确。我在 8 年前构建它时使用的框架并不理想，现在它肯定已经过时了。是时候重新编码了！

【参考方案1】：

为了让您了解如何快速清理它，您可以执行以下操作并在此基础上进行构建：

<header>
  <div class="container">
    <div class="three columns">
      <a href="http://www.1000islandsplayhouse.com/" ><img id="header-logo" src="/assets/logo-300px.png" style="width:114px;height:100px;"></a>
    </div>
    <div class="nine columns">
      Navigation
    </div>
  </div>
</header>

一些CSS在顶部做边距：

 header 
   margin-top: 30px;
 

【讨论】：

这很棒。感谢您的帮助安迪！