Question

我正在尝试在Bootstrap 4 beta navbar-component中制作navbar-brand更大的字体。

我覆盖了navbar-brand并应用了font-size，它适用于所有现代浏览器

<parameter name="XML_INPUT_STREAM" class="java.io.InputStream" isForPrompting="false">
    <defaultValueExpression><![CDATA[new java.io.ByteArrayInputStream($P{xmlDocument}.getBytes("UTF-8"))]]></defaultValueExpression>
</parameter>

这是我添加到navbar-brand的CSS，以使字体更大：

    <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>

然而，在一些较老的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”接管并在桌面上工作。但是当移动手风琴菜单激活时，布局流动不正确。

所以我只需要添加“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并且像以前一样工作。

Answer 2

使用下面的媒体查询定位safari并调整字体大小

Event Delegation

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

2 个答案: