时间戳

首页 > 解决方案 > Chrome和IE之间的Angular Material下拉菜单不同

css - Chrome和IE之间的Angular Material下拉菜单不同

问题描述

我有一个显示标志选择器和输入字段的自定义移动字段组件。

在Chrome中它看起来像这样。

选择折叠：

选择折叠

选择扩展：

选择展开

在 IE 中：

即选择展开

我看到这是因为我将 MAT-SELECT 设置为width40px，而 Material 的 CDK 覆盖将其设置min-width为 40px。

但是 Chrome 似乎忽略了这一点，因为 IE 没有并强制执行此大小。

如何让 IE 像 Chrome 一样工作？

代码

参考：https ://material.angular.io/components/select/examples

<mat-form-field>
  <mat-label>Favorite food</mat-label>
  <mat-select style="width: 40px">
    <mat-option *ngFor="let food of foods" [value]="food.value">
      {{food.viewValue}}
    </mat-option>
  </mat-select>
</mat-form-field>

这不是我的组件，但它不相关。该问题存在于任何 mat-select 上。上面的关键行是mat-select style="width: 40px"。

许多在线代码宿主和测试在 IE 上不起作用（显然）。所以最好的测试方法就是你的材料链接，并通过检查器进行编辑。

标签： cssangularinternet-explorerangular-material

解决方案

这段代码解决了我的问题。

参考： https ://github.com/angular/components/issues/17276 https://github.com/angular/components/issues/11609

/** IE 11 fixes */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  /* IE10+ CSS styles go here */
  /** IE 11 fixes */
  .cdk-overlay-pane {
    display: block;
  }
}

推荐阅读