Html Angular 7应用程序风格在Safari、Opera&；IE，在Chrome、Firefox、Vivaldi&；边缘

我正在开发一款适用于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>

结果如下。第一个是Chrome/Vivaldi/FireFox/Edge，第二个是Safari&Opera。由于我甚至无法打开material sidenav抽屉（这是一个单独的问题），IE还有其他问题。

为什么这些样式在Safari&IE上不能正常工作？如何制定只在选定浏览器上生效的CSS规则

编辑：我发现包含div的flexbox是由flex布局npm包创建的。如果我在Safari的css编辑器中关闭DisplayFlex，菜单看起来与Chrome中的相同。因此，现在我需要了解如何解决这个问题，它应该会起作用

---

我无法创建闪电战，因为有太多的客户信息需要获取。

主要想法是用

fxFlex=100

（或其他值）替换fxFlex

---

关于StackOverflow，这个问题有多种答案。请参见

您可以共享链接或笔吗？如果没有，请分享更多的css部分。确保您的导航项目是

display:block

！我也有同样的问题。您应该添加

flex:11 auto

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

.action-nav__icon {
width: 2.3rem;
}