Windows（Chrome、Edge 等）和 Macos（Safari）中的边距不同

Question

欢迎。

我有几个关于 Safari 和 Windows 浏览器（Chrome、Edge 等）的问题。我编写了如下所示的代码，问题是当我将 .Content_Container 的边距设置为 63px 时，我的 PC 上的浏览​​器会正确显示它。当我进入我的 macbook 并在 safari 中检查时，边距有几个像素不正确。我发现的解决方法是放置 padding-top: 63px 而不是 Margin-top。有人可以解释为什么会发生这种情况以及是否有解决方法吗？我不想一直使用 padding-top。

.body {
    position: absolute;
    overflow-y: scroll;
    padding: 0;
    margin: 0;
    min-width: 100%;
}

.nav-menu {
    width: 100%;
    z-index: 5;
    margin: 0 auto;
    text-align: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 0;
    position: fixed;
}

.nav-menu ul {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    position: relative;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    width: 100%;
    text-align: center;
    background-color: dodgerblue;
}

.nav-menu ul li {
    margin: 0 auto;
    padding: 0;
    cursor: pointer;
    text-align: center;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    display: inline-block;
}

.nav-menu ul li a {
    text-decoration: none;
    margin: 0 auto;
    display: block;
    padding: 0.55em;
    text-align: center;
    color: white;
    font-size: 1.5rem;
    -webkit-transition: background 0.2s ease-in-out;
    transition: background 0.2s ease-in-out;
}

.nav-menu ul li a i {
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    font-size: inherit;
    font-weight: inherit;
}

.nav-menu ul li a p {
    margin: 10px auto 0;
    padding: 0;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    font-weight: inherit;
}

.Content_Container {
    margin: 63px auto 0;
    padding: 0;
}

main {
    margin: 0 auto;
    padding: 0;
}

aside {
    margin: 0 auto;
    padding: 0;
}

main img {
    margin: 0 auto;
    padding: 0;
    max-width: 100%;
}

<div class="body">
  <nav class="nav-menu">
      <ul>
          <li><a href="#" class="current-nav"><p>Homepage</p></a>
          </li><li>
              <a href="#"><p>Item 1</p></a>
          </li><li>
              <a href="#"><p>Item 2</p></a>
          </li><li>
              <a href="#"><p>Item 3</p></a>
          </li>
      </ul>
  </nav>

  <div class="Content_Container">
      <main>
          <img src="https://wallpaperscraft.com/image/city_hong_kong_night_clouds_lights_58330_3840x2160.jpg" alt="" title="" style="opacity: 1;">
      </main>
      <aside>

      </aside>
      <div style="height: 500px;"></div>
  </div>
<div>

是因为比例吗？

Answer 1

我快速浏览了一下，遗憾的是我没有 mac，但我知道所有浏览器都有自己的框架
Edge/Internet Explorer 带有前缀 -ms-
带有前缀 -moz- 的 Firefox
带有前缀 -webkit- 的谷歌浏览器
Safari 前缀为 -webkit-,
Opera 前缀为 -webkit-

我注意到你写了一些 webkit。我已经在 Autoprefixed CSS 上对其进行了修改。我认为它可能在mac上工作，如果不是那么抱歉我不能提供更多帮助。

.body {
    position: absolute;
    overflow-y: scroll;
    padding: 0;
    margin: 0;
    min-width: 100%;
}

.nav-menu {
    width: 100%;
    z-index: 5;
    margin: 0 auto;
    text-align: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 0;
    position: fixed;
}

.nav-menu ul {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    position: relative;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    width: 100%;
    text-align: center;
    background-color: dodgerblue;
}

.nav-menu ul li {
    margin: 0 auto;
    padding: 0;
    cursor: pointer;
    text-align: center;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    display: inline-block;
}

.nav-menu ul li a {
    text-decoration: none;
    margin: 0 auto;
    display: block;
    padding: 0.55em;
    text-align: center;
    color: white;
    font-size: 1.5rem;
    -webkit-transition: background 0.2s ease-in-out;
    -o-transition: background 0.2s ease-in-out;
    transition: background 0.2s ease-in-out;
}

.nav-menu ul li a i {
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    font-size: inherit;
    font-weight: inherit;
}

.nav-menu ul li a p {
    margin: 10px auto 0;
    padding: 0;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    font-weight: inherit;
}

.Content_Container {
    margin: 63px auto 0;
    padding: 0;
}

main {
    margin: 0 auto;
    padding: 0;
}

aside {
    margin: 0 auto;
    padding: 0;
}

main img {
    margin: 0 auto;
    padding: 0;
    max-width: 100%
}