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还有其他问题，因为我什至无法打开物料侧边抽屉（这是一个单独的问题）。

为什么样式无法在Safari和IE上正常工作？如何使CSS规则仅在选定的浏览器上起作用？

编辑：我发现包含div的flexbox由flex-layout npm包创建。如果我在Safari的CSS编辑器中关闭了display flex，则菜单看起来与Chrome中的菜单相同。因此，现在我需要了解如何解决此问题，它应该可以工作。

我无法创建Blitz，因为有太多客户信息无法提取。

Answer 1

角度为

Polyfills 的几行代码使您的应用程序兼容不同的浏览器。我们编写的代码主要在ES6（新功能：概述和比较）中，与IE或firefox不兼容，并且需要一些环境设置才能在这些浏览器中查看或使用。

Polyfills.ts 由angular提供，可帮助您消除专门设置所有内容的需要。

来自 Docs

  

Angular建立在Web平台的最新标准之上。   针对如此广泛的浏览器具有挑战性，因为它们确实   不支持现代浏览器的所有功能。

了解更多 here

Answer 2

主要思想是将fxFlex替换为fxFlex=100（或其他值）

在StackOverflow上有针对此问题的多个答案。参见Flexbox layout on Safari not working in mobile view