Question

欢迎。

我有几个与Safari和Windows浏览器（Chrome，Edge等）有关的问题。我写了这个代码如下所示，问题是当我将.Content_Container的边距设置为63px时，我的PC上的浏览器会正确显示它。当我进入我的Macbook并在safari中检查它时，边距不正确几个像素。我发现的修复方法是使用填充顶部：63px而不是Margin-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，但我知道所有浏览器都有自己的框架
边缘/ Internet Explorer，前缀为-ms-
Firefox前缀为-moz-
谷歌浏览器，前缀为-webkit-
带有前缀-webkit-的Safari，具有前缀-webkit-

的Opera

我注意到你写了一些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%
}

Windows（Chome，Edge等）和Mac OS（Safari）中的保证金不同

1 个答案: