角度材质下拉菜单在 IE11 中未正确显示答案

【问题标题】：Angular Material Dropdown Not Showing Correctly in IE11角度材质下拉菜单在 IE11 中未正确显示
【发布时间】：2017-08-07 16:27:44
【问题描述】：

有没有办法让 IE11 正确显示 Angular Material Dropdown（就像所有其他浏览器一样）？

应该是这样的：

这是它在 IE11 中的样子：

这是网站： [示例不再可用。 AngularJS 太慢了，我们用更快的技术代替它]

这是该导航线的相关代码（简体）：

angular.module('App', ['ngMaterial']);

<!DOCTYPE html>
<html ng-app="App">

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular-animate.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular-aria.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular-messages.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.4/angular-material.min.js"></script>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.4/angular-material.min.css">
</head>

<body>
  <div class="md-block" flex-gt-xs>
    <md-input-container layout="row">
      <div flex>
        <label>Mein Start-Ort (Adresse)</label>
        <inputclass="form-control" />
      </div>
      <div flex="nogrow">
        <md-button class="md-icon-button" aria-label="Standort">
          <md-icon md-svg-icon="_img/icons/location.svg"></md-icon>
        </md-button>
      </div>
    </md-input-container>
  </div>

  <div class="md-block" layout="row">
    <div flex="nogrow">
      <md-button class="md-raised md-primary">Schweiz</md-button>
    </div>
    <md-input-container flex>
      <label>Anreise</label>
      <md-select ng-model="transport">
        <md-option value="car" selected>Mit dem Auto</md-option>
        <md-option value="transit">Mit dem ÖV</md-option>
        <md-option value="bike">Mit dem Velo</md-option>
        <md-option value="walk">Zu Fuss</md-option>
      </md-select>
    </md-input-container>
  </div>
</body>

【问题讨论】：

顺便问一下：谁能告诉我为什么下拉菜单通常打开这么慢（所有浏览器）？

标签： angularjs angular-material internet-explorer-11

【解决方案1】：

我认为您不需要右侧元素的弹性值。这就是你所追求的吗？

angular.module('App', ['ngMaterial']);

<!DOCTYPE html>
<html ng-app="App">

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular-animate.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular-aria.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular-messages.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.4/angular-material.min.js"></script>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.4/angular-material.min.css">
</head>

<body>
  <div layout="row">
  <div class="md-block" flex-gt-xs>
    <md-input-container layout="row" flex>
      <div flex>
        <label>Mein Start-Ort (Adresse)</label>
        <input class="form-control" />
      </div>
      <div>
        <md-button class="md-icon-button" aria-label="Standort">
          <md-icon md-svg-icon="_img/icons/location.svg"></md-icon>
        </md-button>
      </div>
    </md-input-container>
  </div>

  <div class="md-block" layout="row">
    <div>
      <md-button class="md-raised md-primary">Schweiz</md-button>
    </div>
    <md-input-container>
      <label>Anreise</label>
      <md-select ng-model="transport">
        <md-option value="car" selected>Mit dem Auto</md-option>
        <md-option value="transit">Mit dem ÖV</md-option>
        <md-option value="bike">Mit dem Velo</md-option>
        <md-option value="walk">Zu Fuss</md-option>
      </md-select>
    </md-input-container>
  </div>
  </div>
</body>

【讨论】：

你做到了，非常感谢！只有一个（奖励）问题：你知道为什么切换标签或打开下拉菜单这么慢吗？你知道如何改进吗？
我没有。我自己也被 IE 的性能问题所困扰。如果你在谷歌上搜索“angular material performance ie”，你会看到很多关于这个的问题。在筛选了他们 github 站点上的许多问题后，我很幸运地禁用了涟漪效应和一些仅适用于 IE 的 css 转换。另外，请确保您已升级到最新版本，因为我知道他们在其中一个版本中对选项卡性能进行了一些重大修复。
嗨@adam0101 - 谢谢你的提示！我刚刚将 dev.so*** 网站更新为 angular 1.6.4 和 angular material 1.1.4 - 但性能问题仍然存在（在桌面系统上的所有浏览器上，它仅在移动设备上的速度还可以） - 特别是选项卡切换和下拉打开很慢。您是否知道更好/更快的框架可以使用？
@SimonFerndriger，有几个使用 Material Design 的框架，但不确定有多少与 Angular 配合得很好。 Bootstrap 4 将内置 flexbox 功能，您可以为其获取 Material Design 主题，但它仍在开发中。 Here's a list of some others
非常感谢@adam0101