Vue Bootstrap 4 Navbar Height & Dropdown不能在Safari上工作。

Question

我在Safari浏览器上的导航条出现了以下问题。

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

我的导航条代码如下。没有添加额外的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设备上的问题。