Firefoxで固定ヘッダーバーにギャップがある

何らかの理由で、Firefoxではヘッダーバーの上に約10ピクセルの上余白が表示されますが、Chromeでは上書きされません。これは、固定ヘッダーバーだけの本体には影響しません。私がその位置を取り除いた場合：固定;ギャップはありませんが、もう固定されません。赤でマークされFirefoxで固定ヘッダーバーにギャップがある

ギャップ：

body { 
 
    margin: 0px; 
 
    } 
 
    #topbar { 
 
    width: 100%; 
 
    height: 50px; 
 
    background-color: #F0F0F0; 
 
    margin: 0px; 
 
    padding: 0px; 
 
    position: fixed; 
 
    z-index: 10000; 
 
    } 
 
    #topbar .header { 
 
    display: inline-block; 
 
    font-size: 35; 
 
    color: darkgrey; 
 
    margin-top: 5px; 
 
    }

<body> 
 
    <div id="topbar"> 
 
    <div class="header"> 
 
     Header 
 
    </div> 
 
    <div class="nav_item"> 
 
     <button class="nav_icon"></button> 
 
     <nav> 
 
     <a href="">Home</a> 
 
     <a href="">Item 1</a> 
 
     <a href="">Item 2</a> 
 
     <a href="">Logout</a> 
 
     </nav> 
 
    </div> 
 
    </div>

出典

2016-05-17 Nick

次のCSSを追加しますdownvoteする

#topbar { 
    top: 0; 
}

出典

2016-05-17 13:25:18

理由は？ –

これは実際に動作します！これは何とかマージンと違いますか？ – Nick

@Nickはい、 'position：fixed'または' absolute'を使うとブラウザの問題を避けるために私たちの必要に応じて 'top '、' left'、 'right'または' bottom'を使うほうが良いでしょう。 –

Firefoxで固定ヘッダーバーにギャップがある

答えて

関連する問題