Safariで不思議なマージンを持つ固定ヘッダー

Question

私が開発しているサイトでは、スクロールすると大きくなる固定メニューが必要です。 ChromeとFirefoxで完全に動作しますが、私がサファリを試すと、上に余白が追加されます。

ヘッダー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; 
} 

これはクローム/ Firefoxの（正しい道）

に見え、これはどのようにあるかでありますそれはSafari（間違っている）に見える：

...ご覧のとおり、上に大きな白い余白があります。それが何であるか分かりません。ヘッダー要素のCSSコード全体を削除すると、余白が消えます。私は個々のプロパティを個別に削除しようとしましたが、私は同じマージンを見続けています。あなただけのナビゲーションバーは、常にどこ滞在する知っているように、ナビゲーションバーにtop: 0;を追加する必要があります任意の助け

Answer 1

ため

ありがとう。これがうまくいくといいでしょう:)