Итак, мы используем Angular 7.2 с материалами 7.2.1 и пытаемся исправить проблему, связанную с css, в которой мы добавляем fxLayout к mat-menu.
Это добавляет горизонтальные и вертикальные полосы прокрутки, что делает его непригодным для использования (см. Скриншоты).
Мой вопрос заключается в том, как я могу изменить стили flexbox в scss для решения этой ie11 проблемы:
т.е. возможно, используя медиа-запрос:
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
// IE10+ CSS here
}
Вот фрагмент нашего hubml-шаблона menubar:
<button mat-button [matMenuTriggerFor]="adminMenu" *ngIf="userRoles.admin.CanView">Admin
<mat-icon svgIcon="down" style ="vertical-align: top;height: 20px; width: 20px;"class="caret">arrow_drop_down</mat-icon>
</button>
<mat-menu #adminMenu="matMenu" [overlapTrigger]="false" class="mega-menu app-dropdown">
<div fxLayout="column wrap">
<div fxFlex class="p-1">
<a mat-menu-item [matMenuTriggerFor]="adminManagementMenu" >Management</a>
<a mat-menu-item [matMenuTriggerFor]="adminMonitoringMenu" >Monitoring</a>
<a mat-menu-item [matMenuTriggerFor]="adminConfigurationMenu" >Configuration</a>
<a mat-menu-item routerLink="/activation">Activation</a>
</div>
</div>
</mat-menu>
и пример сгенерированного html для пункта меню management (скопировано из инспектора Chrome):
<div class="mat-menu-panel ng-trigger-transformMenu ng-tns-c11-26 mega-menu app-dropdown mat-menu-after mat-menu-below ng-star-inserted mat-elevation-z4" role="menu" tabindex="-1" ng-reflect-klass="mat-menu-panel" ng-reflect-ng-class="[object Object]" style="transform-origin: left top 0px;"><div class="mat-menu-content"><div _ngcontent-c10="" fxlayout="column wrap" ng-reflect-layout="column wrap" style="flex-flow: column wrap; box-sizing: border-box; display: flex;"><div _ngcontent-c10="" class="p-1" fxflex="" ng-reflect-flex="" style="flex: 1 1 1e-09px; box-sizing: border-box;">
<a _ngcontent-c10="" aria-haspopup="true" class="mat-menu-item mat-menu-item-submenu-trigger ng-star-inserted mat-menu-item-highlighted" mat-menu-item="" ng-reflect-menu="[object Object]" role="menuitem" tabindex="0" aria-disabled="false" aria-expanded="true">
Management
<div class="mat-menu-ripple mat-ripple" matripple="" ng-reflect-disabled="false" ng-reflect-trigger=""></div></a>
Мой вопрос в основном связан с тем, что я могу сделать в нашем файле scss для решения некоторых из этих ie1 связанных с css проблем:
т.е. возможно, используя медиа-запрос:
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
// IE10+ CSS here
}