html - 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)上使用显示 block ，但那是不行的。

相关的 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 用作标题(因此填充百分比的随机性)，所以我认为 flex box 非常适合我的目的。

在此先感谢您的帮助! (对于随机网址，我很抱歉，我不能发布超过 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>