修复了 Safari 中带有神秘边距的标题答案

【问题标题】：Fixed header with mysterious margin in Safari修复了 Safari 中带有神秘边距的标题
【发布时间】：2016-07-07 07:23:44
【问题描述】：

在我正在开发的网站中，我希望顶部有一个固定菜单，当我滚动时它会增长。它在 Chrome 和 Firefox 上完美运行，但是当我在 safari 上尝试时，它会在顶部添加一个边距。

标题 HTML：

<div id="top-background">
    <div id="top-menu">
        <header class="large">
            <nav><img class="logo" src="img/logo-color-solo.png"/>
            <ul class="menu">
              <li><span><a data-scroll href="#de-que-se-trata">¿De qué<br/>se trata?</a></span></li>
              <li><span><a data-scroll href="#beneficios">¿Cuáles son<br/>los beneficios?</a></span></li>
              <li><a data-scroll href="#como-se-usa"><span>¿Cómo se usa?</a></span></li>
              <!--<li><a href="#"><span>¿Cuáles son las<br/>membresías?</a></span></li>-->
              <li><a data-scroll href="#unete"><span>Únete</a></span></li>
            </ul> 
            </nav>
        </header>
    </div>
...

标题 CSS：

header{ 
   background-color: rgba(255, 255, 255, 0.95); 
   border-bottom: 1px solid #aaaaaa; 
   float: left; 
   width: 100%; 
   position: fixed; 
   z-index: 10;
}

这就是它在 Chrome/Firefox 上的样子（正确的方式）

这就是它在 Safari 上的样子（错误）：

...如您所见，顶部有一个巨大的白边。不知道它是什么。如果我删除标题元素的整个 CSS 代码，边距就会消失。我也尝试单独删除每个属性，但我一直看到相同的边距。

感谢任何帮助

【问题讨论】：

为什么是float: left？也可以尝试添加top: 0 看看会发生什么
它似乎是内部图像文本的 awto margin-top。
只需添加坐标顶部：0； ...最终离开：0；避免其他意外行为
我认为我们需要更多的 CSS 来帮助你。不仅仅是标题CSS。如果它已经在线，则可能是 url。
你试过 top: 0; in header{ } 吗？

标签： css css-position margin

【解决方案1】：

您只需将top: 0; 添加到导航栏，以便导航栏始终知道在哪里停留。希望这会有所帮助:)

【讨论】：