IE11中的发行样式Angular Material垫菜单

Question

因此，我们将Angular 7.2与材料7.2.1结合使用，并试图解决与CSS相关的问题，即在fxLayout中添加mat-menu。

这会添加水平和垂直滚动条，使其无法使用（请参见屏幕截图）。

我的问题主要是围绕如何在scss中修改flexbox样式以处理此ie11问题：

即也许使用媒体查询：

 @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    // IE10+ CSS here
}  

这是菜单栏html模板中的代码段：

<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> 

以及management菜单项（从Chrome检查器复制）生成的html的示例：

<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
}  

Answer 1

我们刚刚从div中删除了fxLayout和fxFlex，并且在IE中也可以正常使用

<mat-menu #adminMenu="matMenu" [overlapTrigger]="false" class="mega-menu app-dropdown">
    <div>
        <div 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>