Angular-material md-list-item 有时全屏高度

Question

当附加点击操作时，每个列表项最终都是全屏高度。它的大小应该足以包含文本。

下面是一个最小的问题示例，显示了在作为文件打开时出现的问题。

在codepen - http://codepen.io/anon/pen/ZOaPVy - 中可以正常使用，去掉点击动作后也可以正常使用。我正在 Linux 上的 chrome 浏览器中查看它。

<html>
<head>
  <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc.5/angular-material.min.css">
</head>
<body>
  <md-list ng-app="BlankApp">
    <md-list-item ng-click="null">
      <p> List item 1 </p>
    </md-list-item>
    <md-list-item ng-click="null">
      <p> List item 2 </p>
    </md-list-item>
  </md-list>

  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-animate.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-aria.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-messages.min.js"></script>

  <script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc.5/angular-material.min.js"></script>

  <script type="text/javascript">
    angular.module('BlankApp', ['ngMaterial']);
  </script>

</body>
</html>

这是一个类似问题的更简化版本： Angular Material: Each md-list-item takes full page width and Sidenav have long scrollbar

Answer 1

我在 Chrome 和 MacBook 上的 Safari 中重现了这个非常奇怪的问题。它没有出现在 Firefox 中。

罪魁祸首似乎是 md-list-item

的 _md-list-item-inner 的 100% 高度

如果将此添加到 <head> 应该一切正常

<style>
  md-list-item._md-button-wrap>div.md-button:first-child ._md-list-item-inner {
    height: initial;
  }
</style>

Angular-material md-list-item 有时全屏高度

Angular-material md-list-item full screen height sometimes

angularjs

angular-material