AngularJS Material md-list 高度在 chrome 中完全不同

Question

我刚开始使用 AngularJS，我正在使用 Angular Material，我遇到了一个我无法理解的问题。

编写 md-list 时，它在 Firefox 和 IE (11) 中呈现良好，但在 chrome 中，每个 md-list-item 占据 window 的完整高度，但仅当我是运行我网站的代码时。

如果我查看其他页面（例如 Angular Material 演示），或将代码放入可共享的编辑器（如 codepen 或 jsfiddle）中，它们会呈现良好。

下面的代码是一个显示不正确的测试模板

<html lang="en" >
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.css">
</head>
<body ng-app="BlankApp" ng-cloak>
  <div style="height:400px;width:500px;">
      <md-list>
        <md-list-item ng-click="null">Item 1</md-list-item>
      </md-list>
      <md-list>
        <md-list-item ng-click="null">Item 2</md-list-item>
      </md-list>
      <md-list>
        <md-list-item ng-click="null">Item 3</md-list-item>
      </md-list>
  </div>


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

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

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

</body>
</html>

代码笔：http://codepen.io/anon/pen/pyqKZr

失败布局的现场演示：http://angular.deathwishgame.co.uk/

为什么只在单独渲染我自己的页面时出现这种情况，我做错了什么？

Answer 1

您可以尝试将所有 md-list-item 放在一个 md-list 中。

<div style="height:400px;width:500px;">
      <md-list>
        <md-list-item ng-click="null">Item 1</md-list-item>
        <md-list-item ng-click="null">Item 2</md-list-item>
        <md-list-item ng-click="null">Item 3</md-list-item>
      </md-list>
</div>

Answer 2

您运行进入 https://github.com/angular/material/issues/8094 唯一的解决方法是给列表项一个 height/max-height.

似乎有一个拉取请求待审核。

Answer 3

使用 angular-material 版本 1.0.9 而不是 1.1.0。然后，它会正常工作。

试试运行这个代码，我已经更正了你托管的代码

<html lang="en" >
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Angular Material style sheet -->
  <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.9/angular-material.min.css">
</head>
<body ng-app="BlankApp" ng-cloak>
  <!--
    Your HTML content here
  -->
  <div style="height:400px;width:500px;">
      <md-list>
        <md-list-item ng-click="null">Item 1</md-list-item>
        <md-list-item ng-click="null">Item 2</md-list-item>
        <md-list-item ng-click="null">Item 3</md-list-item>
      </md-list>
  </div>


  <!-- Angular Material requires Angular.js Libraries -->
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-aria.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-messages.min.js"></script>

  <!-- Angular Material Library -->
  <script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.9/angular-material.min.js"></script>

  <!-- Your application bootstrap  -->
  <script type="text/javascript">    
    /**
     * You must include the dependency on 'ngMaterial' 
     */
    angular.module('BlankApp', ['ngMaterial']);
  </script>

</body>
</html>

Answer 4

<html lang="en" >
   <head>
      <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
      <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
      <script language="javascript">
         angular
            .module('firstApplication', ['ngMaterial'])
            .controller('listController', listController);

         function listController ($scope) {
            var self = this;            
            self.allContacts = loadContacts();
            self.contacts = [self.allContacts[0]];

            function loadContacts() {
               var contacts = [
                  'Roberto Karlos',
                  'Bob Crestor',
                  'Nigel Rick',
                  'Narayana Garner'                  
               ];
               return contacts.map(function (c, index) {
                     var cParts = c.split(' ');
                     var contact = {
                        name: c,
                        email: cParts[0][0].toLowerCase() + '.' + cParts[1].toLowerCase() + '@example.com',
                        image: 'http://lorempixel.com/50/50/people?' + index
                     };
                     contact._lowername = contact.name.toLowerCase();
                     return contact;
               });
            }
         }                 
      </script>      
   </head>
   <body ng-app="firstApplication"> 
      <div id="listContainer" ng-controller="listController as ctrl" layout="column" ng-cloak>
         <md-content>
             <md-list>
               <md-subheader class="md-no-sticky">Contacts</md-subheader>
               <md-list-item class="md-2-line contact-item" ng-repeat="(index, contact) in ctrl.allContacts"
                  ng-if="ctrl.contacts.indexOf(contact) < 0">
                  <img ng-src="{{contact.image}}" class="md-avatar" alt="{{contact.name}}" />
                  <div class="md-list-item-text compact">
                     <h3>{{contact.name}}</h3>
                     <p>{{contact.email}}</p>
                  </div>
                  <md-divider ng-if="!$last"></md-divider>
               </md-list-item>
            </md-list>
            <md-list>
               <md-subheader class="md-no-sticky">Contacts (With Insets)</md-subheader>
               <md-list-item class="md-2-line contact-item" ng-repeat="(index, contact) in ctrl.allContacts"
                  ng-if="ctrl.contacts.indexOf(contact) < 0">
                  <img ng-src="{{contact.image}}" class="md-avatar" alt="{{contact.name}}" />
                  <div class="md-list-item-text compact">
                     <h3>{{contact.name}}</h3>
                     <p>{{contact.email}}</p>
                  </div>
                  <md-divider md-inset ng-if="!$last"></md-divider>
               </md-list-item>
            </md-list>
         </md-content>   
       </div>
   </body>
</html>

AngularJS Material md-list 高度在 chrome 中完全不同

AngularJS Material md-list hight completely different in chrome

html

javascript

css

angularjs

angular-material