Vue Bootstrap 4 导航栏高度和下拉列表在 Safari 上不起作用

Question

我在 Safari 浏览器上的导航栏出现以下问题：

我没有 iOS 设备或 Mac，所以我无法在本地调试它。我已经尝试按照另一个线程的建议向我的 b-navbar-toggle 添加一个空的 href="#"，但没有任何运气。

我的导航栏代码如下所示。没有额外的 CSS 添加。

 <template>
  <b-navbar id="nav" toggleable="lg" type="dark" variant="dark">
    <b-container>
      <b-navbar-brand to="/">TRIAB</b-navbar-brand>
      <b-navbar-toggle href="#" target="nav-text-collapse"></b-navbar-toggle>
      <b-collapse href="#" id="nav-text-collapse" is-nav>
        <b-navbar-nav>
          <b-nav-item active-class="active" exact to="/">{{ $t('nav.home') }}</b-nav-item>
          <b-nav-item active-class="active" to="/about">{{ $t('nav.about') }}</b-nav-item>
          <b-nav-item active-class="active" to="/products">{{ $t('nav.products') }}</b-nav-item>
          <b-nav-item active-class="active" to="/news">{{ $t('nav.news') }}</b-nav-item>
          <b-nav-item active-class="active" to="/contact">{{ $t('nav.contact') }}</b-nav-item>
        </b-navbar-nav>
      <b-navbar-nav class="ml-auto">
          <b-nav-item @click="$i18n.locale = 'en'">
            <img src="../../assets/img/flags/us.png" alt="us flag">
          </b-nav-item>
          <b-nav-item @click="$i18n.locale = 'sv'">
            <img src="../../assets/img/flags/sv.png" alt="sv flag">
          </b-nav-item>
      </b-navbar-nav>
      </b-collapse>
    </b-container>
  </b-navbar>
</template>

导航栏在 Android、Chrome、Firefox 和 Edge 上都可以正常工作。有谁知道为什么会这样吗？

Answer 1

将 display: flex; 更改为 display: webkit-box; 解决了 Safari 和 iOS 设备上的问题。

Vue Bootstrap 4 导航栏高度和下拉列表在 Safari 上不起作用

Vue Bootstrap 4 Navbar Height & Dropdown Not Working On Safari

safari

twitter-bootstrap