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

Question

我有一个显示标志 select 或输入字段的自定义移动字段组件。

在Chrome中是这样的。

select 崩溃了：

select展开：

在 IE 中：

我看到这是因为我将 MAT-SELECT 设置为 width 40px 并且 Material 的 CDK 覆盖采用了它并将 min-width 设置为40px.

但是 Chrome 似乎忽略了这一点，因为 IE 不会执行此大小。

如何让 IE 像 Chrome 一样运行？

代码

REF: 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 上运行（很明显）。因此，最好的测试方法就是您 Material link 并通过检查器进行编辑。

Answer 1

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

参考： 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;
  }
}

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

Angular Material dropdown different between Chrome and IE

css

internet-explorer

angular-material

angular