html - 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，但我知道所有浏览器都有自己的框架
带有前缀 -ms-
的 Edge/Internet Explorer前缀为 -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%
}