修复了Safari

Question

在我正在开发的网站中，我希望在滚动时增加一个固定的菜单。它在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代码，则边距消失。我也尝试单独删除每个属性，但我一直看到相同的边距。

Thanx任何帮助

Answer 1

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