修复了 header 在 Safari 中出现神秘边距的问题

Question

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

header 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>
...

header 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 上的样子（错误）：

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

感谢您的帮助

Answer 1

你只需要在导航栏中添加top: 0;，这样导航栏就知道该停在哪里了。希望这会有所帮助:)

修复了 header 在 Safari 中出现神秘边距的问题

Fixed header with mysterious margin in Safari

css

margin

css-position