html - Angular 7 App 样式在 Safari、Opera 和 IE 中损坏，在 Chrome、Firefox、Vivaldi 和 Edge 中正常

Question

我正在开发一款适用于 Mac 和 Windows 机器的应用程序。

我正在使用 *ngFor 循环遍历附有图标的菜单项列表。我在每个单独的菜单项上放置了一个类，这样我就可以设置它们的样式。

Parent Component
<app-application-action class="side-nav__item" fxFlex *ngFor="let action of actions" [showTitle]=true
    [action]="action">
</app-application-action>

Child Component (<app-application-action>)
 <div fxLayout="row" fxFlex class="action-nav__icon-box" fxLayoutAlign="start center">

 <div [ngSwitch]="IconType" fxFlex="nogrow">

  <span fxFlex="nogrow" *ngSwitchCase="0" class="{{ Icon }}"></span>

  <svg fxFlex="nogrow" *ngSwitchCase="1" class="action-nav__icon">
   <use [attr.xlink:href]="Icon"></use>
  </svg>
 </div>

 <div *ngIf="showTitle" fxFlex class="action-nav__title"> 
  <span *ngIf="Count !== undefined" class="action-nav__notification">{{Count}}</span>
  <span>{{Title}}</span>
 </div>
</div>

样式

.side-nav__item {
padding-bottom: .7rem;
}

.action-nav__icon {
width: 2.3rem;
}

结果如下。首先是 Chrome/Vivaldi/FireFox/Edge，其次是 Safari & Opera。 I.E 还有其他问题，因为我什至无法打开 material sidenav 抽屉(这是一个单独的问题)。

为什么样式在 Safari 和 IE 上不能正常工作？我怎样才能使 CSS 规则只在选定的浏览器上生效？

编辑:我发现包含的 div 具有由 flex-layout npm 包创建的 flexbox。如果我在 Safari 的 css 编辑器中关闭 display flex，菜单看起来与 Chrome 中的一样。所以现在我需要了解如何解决这个问题，它应该可以工作。

我无法创建 Blitz，因为要删除的客户信息太多。

Answer 1

主要思想是将 fxFlex 替换为 fxFlex=100(或其他一些值)

这个问题在 StackOverflow 上有多个答案。见Flexbox layout on Safari not working in mobile view