Question

出于某种原因，我在Firefox中的标题栏上方获得了大约10px的上边距，但在Chrome中却没有。这不会影响主体，只会影响固定的标题栏。如果我删除位置：固定;然后没有差距，但它不再固定。

标记为红色的差距：

   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>

Answer 1

添加以下css：

#topbar {
    top: 0;
}

固定标题栏在Firefox中有差距

1 个答案: