我正在开发一款适用于 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，因为要删除的客户信息太多。
最佳答案
主要思想是将 fxFlex 替换为 fxFlex=100(或其他一些值)
这个问题在 StackOverflow 上有多个答案。见Flexbox layout on Safari not working in mobile view
关于html - Angular 7 App 样式在 Safari、Opera 和 IE 中损坏，在 Chrome、Firefox、Vivaldi 和 Edge 中正常，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55936360/