Safari使用Flexbox将Horizo​​ntal Nav显示为Vertical

Question

我的水平导航栏在Safari中变为垂直。当浏览器增大/减小时，使用flexbox和空格/大小。它在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个以上的链接）

EM

Answer 1

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

JSfiddle Demo

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;