Safari 使用 Flexbox 将水平导航显示为垂直

Question

我的水平导航栏在 Safari 中变为垂直。 随着浏览器大小的增加/减小，使用 flexbox 对 li 进行空间/大小调整。它在 Chrome 和 Firefox 中运行良好，但由于某种原因它在 Safari 中变得垂直（这使得粘性滚动导航栏绝对会破坏任何布局尝试）。

我有点代码菜鸟。将我的第一个草稿编码为 site 作为作品集，但如果它不能在主要浏览器上正常工作（适用于 Safari、Chrome 和 Firefox），它就不能很好地工作。我在这里搜索了答案，但没有找到任何可以解决我的问题的方法。

我检查了 caniuse.com (caniuse.com/#feat=flexbox) 并检查了那里列出的错误。这不在Github 上的已知错误/问题列表中。虽然 Github 上有一支笔（codepen.io/philipwalton/pen/NqLoNp），但我认为可能很接近。在 .FlexContainer（在我的情况下为 navList）之前尝试在 .FlexItem（在我的情况下为 li）上使用显示块，但这是不行的。

相关 HTML —

<nav>
    <ul class="navList">
        <li><a href="index.html">Home</a></li>
        <li><a href="mLe_pages/mLe_PORTFOLIO.html">Portfolio</a></li>
        <li><a href="mLe_pages/mLe_ABOUT.html">About</a></li>
        <li><a href="mLe_pages/mLe_BLOG.html">Blog</a></li>
        <li><a href="mLe_pages/mLe_SAMPLE.html">Sample</a></li>
        <li><a href="mLe_pages/mLe_PROJECT.html">Project</a></li>
        <li><a href="mLe_pages/mLe_CONTACT.html">Contact</a></li>
    </ul>
</nav>

我的相关 Css —

.navList {
  display: flex;
  justify-content: space-between;
  padding-left: 6.82%;
  padding-right: 15.91%;
  margin-bottom: 3.41%;
  height:auto;
  list-style:none;
  font-size: 3.25vw;
  text-style: bold;
  white-space: nowrap;
  background-color: white;
}

/*divs for sticky nav bar*/
nav {
  width: 100%;
  height: auto;
  z-index:500;
}

这是我关于 stackoverflow 的第一个问题，所以我很感激大家能给我的任何方向。我试图让导航栏与用作标题的 gif 左右对齐（因此填充百分比的随机性），所以我认为弹性框非常适合我的目的。

提前感谢您的帮助！ （对不起，随机网址，我不能发布超过 2 个低代表的链接）

嗯

Answer 1

我怀疑这是没有使用所有必要前缀的情况：

JSfiddle Demo

.navList {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin-bottom: 3.41%;
  height: auto;
  list-style: none;
  font-size: 2.25vw;
  text-style: bold;
  white-space: nowrap;
  background-color: white;
}

<nav>
  <ul class="navList">
    <li><a href="index.html">Home</a>
    </li>
    <li><a href="mLe_pages/mLe_PORTFOLIO.html">Portfolio</a>
    </li>
    <li><a href="mLe_pages/mLe_ABOUT.html">About</a>
    </li>
    <li><a href="mLe_pages/mLe_BLOG.html">Blog</a>
    </li>
    <li><a href="mLe_pages/mLe_SAMPLE.html">Sample</a>
    </li>
    <li><a href="mLe_pages/mLe_PROJECT.html">Project</a>
    </li>
    <li><a href="mLe_pages/mLe_CONTACT.html">Contact</a>
    </li>
  </ul>
</nav>