Ionic 4：Chrome 中不显示 Ionic 标签栏

Question

我正在尝试制作顶部带有标签栏的网站。这一切似乎都适用于 Firefox 和 Edge，但在 Chrome 中它根本不显示标签栏。我的 home.page.html 看起来像这样：

<ion-header>
  <ion-tabs>
  <ion-tab-bar slot="top">

    <ion-tab-button tab="home">
      <ion-router-outlet name="one"></ion-router-outlet>
      <ion-label>Am besten bewertet</ion-label>
      <ion-icon name="heart"></ion-icon>
      <ion-badge>6</ion-badge>
    </ion-tab-button>

    <ion-tab-button tab="settings">
      <ion-router-outlet name="one"></ion-router-outlet>
      <ion-label>Trends</ion-label>
      <ion-icon name="ice-cream"></ion-icon>
    </ion-tab-button>

    <ion-tab-button tab="new">
      <ion-router-outlet name="one"></ion-router-outlet>
      <ion-label>Neueste</ion-label>
      <ion-icon name="clock"></ion-icon>
    </ion-tab-button>

  </ion-tab-bar>
</ion-tabs>
</ion-header>

有什么想法吗？

Answer 1

ion-tab-bar 的样式中有 display: flex; 和 height:100%，无论出于何种原因，它都不会在 chrome 中呈现，但您可以通过添加 style="display: contents;" 到 ion-tab-bar 元素，它将正确显示。

<ion-header>
  <ion-tabs style="display: contents;">
  <ion-tab-bar slot="top">

    <ion-tab-button tab="home">
      <ion-router-outlet name="one"></ion-router-outlet>
      <ion-label>Am besten bewertet</ion-label>
      <ion-icon name="heart"></ion-icon>
      <ion-badge>6</ion-badge>
    </ion-tab-button>

    <ion-tab-button tab="settings">
      <ion-router-outlet name="one"></ion-router-outlet>
      <ion-label>Trends</ion-label>
      <ion-icon name="ice-cream"></ion-icon>
    </ion-tab-button>

    <ion-tab-button tab="new">
      <ion-router-outlet name="one"></ion-router-outlet>
      <ion-label>Neueste</ion-label>
      <ion-icon name="clock"></ion-icon>
    </ion-tab-button>

  </ion-tab-bar>
</ion-tabs>
</ion-header>

Ionic 4：Chrome 中不显示 Ionic 标签栏

Ionic 4: Ionic Tab Bar isn't displayed in Chrome

ionic-framework

ionic4