2

我正在开发适用于 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。IE 还有其他问题，因为我什至无法打开材料侧导航抽屉（这是一个单独的问题）。Chrome/FF/Vivaldi/Edge 上的菜单 Safari/Opera 和 IE 上的菜单

为什么样式在 Safari 和 IE 上无法正常工作？如何制定仅对所选浏览器生效的 CSS 规则？

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

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

4

1 回答 1

0

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

对于这个问题，StackOverflow 上有多个答案。请参阅Safari 上的 Flexbox 布局在移动视图中不起作用

于 2019-11-28T10:00:08.803 回答