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

Question

我的水平导航栏在 Safari 中变成垂直的。 使用 flexbox 和 space/size li 作为浏览器 increases/decreases 的大小。它在 Chrome 和 Firefox 中运行良好，但由于某些原因它在 Safari 中变得垂直（这使得粘性滚动导航栏完全破坏了任何布局尝试）。

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

我检查了 caniuse.com (caniuse.com/#feat=flexbox) 并检查了那里列出的错误。这不在 Github 上的已知 bugs/issues 列表中。虽然 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;
}

这是我关于 Whosebug 的第一个问题，所以我很感激你们能给我的任何方向。我试图让导航栏在左侧和右侧与用作 header 的 gif 对齐（因此填充百分比的随机性），所以我认为 flex box 非常适合我的目的。

提前感谢您的帮助！（抱歉随机网址，我不能 post 超过 2 个链接与这个低代表）

Em

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>

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

Safari displays Horizontal Nav as Vertical using Flexbox

html

css

safari

flexbox