Flex Navbar 在 Safari 中不显示，但在 Chrome 中有效答案

【问题标题】：Flex Navbar doesn't display in Safari but works in ChromeFlex Navbar 在 Safari 中不显示，但在 Chrome 中有效
【发布时间】：2020-02-27 12:18:18
【问题描述】：

我有一个底部导航栏，但遇到了一个非常奇怪的问题。它在 Chrome (Android) 中完美运行，但在 Safari (iOS) 中却不行。

更奇怪的问题似乎是“onclick”事件在导航栏上起作用，所以它似乎确实存在，只是不可见。

我已经做了好几个小时了，还是想不通。任何人都知道可能出了什么问题？

.mobile-bottom-nav {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1000 !important;
  will-change: transform !important;
  transform: translateZ(0) !important;
  display: flex !important;
  height: 60px !important;
  background-color: #fff !important;
  max-width: 600px;
  margin: 0 auto;
}

.mobile-bottom-nav__item {
  flex-grow: 1 !important;
  text-align: center !important;
  font-size: 0.8rem !important;
  display: block !important;
  flex-direction: column !important;
  justify-content: center !important;
  font-weight: 600;
  height: 60px !important;
}

.mobile-bottom-nav__item--active {
  color: #FF0030;
}

.mobile-bottom-nav__item-content {
  display: flex;
  flex-direction: column;
  margin-top: 5px;
  z-index: 1001 !important;
}

<nav class="mobile-bottom-nav">
  <div class="mobile-bottom-nav__item" onclick="">
    <div class="mobile-bottom-nav__item-content mobile-bottom-nav__item--active">
      Section 1
    </div>
  </div>

  <div class="mobile-bottom-nav__item" onclick="">
    <div class="mobile-bottom-nav__item-content">
      Section 2
    </div>
  </div>

  <div class="mobile-bottom-nav__item" onclick="">
    <div class="mobile-bottom-nav__item-content">
      Section 3
    </div>
  </div>
</nav>

如您所见，我尝试添加 z-index 但这也不起作用。

更新似乎删除这 2 行使其显示出来：

will-change:transform !important;
transform: translateZ(0) !important;

【问题讨论】：

点击事件不起作用？但是onclick 在您的代码中为空！给我们截图
@AbdelrahmanGobarah 它有效；我刚刚将其删除以作为示例。

标签： html css

【解决方案1】：

几乎所有现代桌面和移动浏览器都支持 CSS flexbox！您可以在此处查看 flexbox cross-browser 支持和 flexbugs 详细信息。

.mobile-bottom-nav {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1000 !important;
  will-change: transform !important;
  transform: translateZ(0) !important;
  display: -webkit-flex !important;
  display: flex !important;
  height: 60px !important;
  background-color: #fff !important;
  max-width: 600px;
  margin: 0 auto;
}

.mobile-bottom-nav__item {
  flex-grow: 1 !important;
  -webkit-flex-grow: 1 !important;
  text-align: center !important;
  font-size: 0.8rem !important;
  display: block !important;
  flex-direction: column !important;
  -webkit-flex-direction: column !important;
  justify-content: center !important;
  -webkit-justify-content: center !important;
  font-weight: 600;
  height: 60px !important;
}

.mobile-bottom-nav__item--active {
  color: #FF0030;
}

.mobile-bottom-nav__item-content {
  display: -webkit-flex !important;
  display: flex !important;
  -webkit-flex-direction: column;
  margin-top: 5px;
  z-index: 1001 !important;
}

<nav class="mobile-bottom-nav">
  <div class="mobile-bottom-nav__item" onclick="">
    <div class="mobile-bottom-nav__item-content mobile-bottom-nav__item--active">
      Section 1
    </div>
  </div>

  <div class="mobile-bottom-nav__item" onclick="">
    <div class="mobile-bottom-nav__item-content">
      Section 2
    </div>
  </div>

  <div class="mobile-bottom-nav__item" onclick="">
    <div class="mobile-bottom-nav__item-content">
      Section 3
    </div>
  </div>
</nav>

【讨论】：