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

debugcn 发表于 Dev

西蒙·芬德里格

有没有办法让 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>

亚当0101

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

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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。