css - 使 navbar-brand 更大的字体使其与旧版 Safari 中的导航项重叠

Question

我试图在 Bootstrap 4 beta navbar-component 中使 navbar-brand 字体更大。

我覆盖了 navbar-brand 并应用了 font-size，它在所有现代浏览器上都能正常工作

    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" routerLink="start">Nordic Sounds</a>

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
    aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>


  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item pb-0 mb-0">
        <a class="nav-link pb-0" routerLink="search" routerLinkActive="active">
          Read the book
        </a>
      </li>

      <li class="nav-item pb-0 mb-0" *ngFor="let page of applicationStateService.getAllPages()">
          <a class="nav-link pb-0" [routerLink]="['page', page.id]" routerLinkActive="active">
        {{ page.title }}
          </a>
      </li>
      <li class="nav-item p-0 m-0" *ngIf="!applicationStateService.isProductionBuild()">
        <a class="nav-link pb-0" routerLink="admin" [routerLinkActive]="['active']">
          Admin
        </a>
      </li>
    </ul>
  </div>
</nav>

这是我添加到 navbar-brand 以使字体变大的 CSS:

.navbar-brand {
    font-family: "lato" !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    font-size: 1.9em;
    color: #393939;
}

但是，在一些较旧的 Safari 上(例如 El Capitan 10.11)，我将导航栏品牌做得越大，它就越开始与旁边的第一个导航项重叠。

较旧的 Safari(白色字体是因为我在捕获时不小心将其悬停):

现代浏览器:

当我检查这个较旧的 Safari 上的元素时，容器似乎比实际的字体元素小，所以字体基本上溢出了容器。如果我在旧版 Safari 上从“.navbar”中删除“display: flex”，那么“display:-webkit-box”将成为主导并且布局有效。但是，它在移动布局中的流动不正确。

Answer 1

我能够解决这个问题。我猜它有点老套，因为它开箱即用，但无论如何。

导致此问题的原因(不知道为什么)是在较旧的 Safari 上，.navbar 同时具有“display: flex”和“display:-webkit-box”。如果我禁用了“display: flex”，那么“display:-webkit-box”就会接管它并在桌面上运行。但是当移动 Accordion 菜单激活时，布局流动不正确。

所以我只需要将“display: -webkit-box !important”添加到 1) 在支持它的浏览器上覆盖“display: flex” 2) 仅影响桌面版本:

.navbar {
    // Fixes menu on old Safari by overriding display: flex on desktop-view
    @include media-breakpoint-up(md) {
        display: -webkit-box !important;
    }
}

请注意，断点必须与您在 .navbar 上的 navbar-expand-{xs/sm/md/lg/xl} 相对应。

我在最新的 Chrome、Firefox 和 Edge 上进行了测试，他们不介意这个 CSS 并且像以前一样工作。