Question

我是棱角分明材料设计的新手，我的角质材料设计代码在谷歌浏览器中运行良好，但目前还没有使用Mozilla Firefox和Internet Explorer。我知道在定义布局或弹性时我的代码中存在一些错误。所以我想知道我写错了什么

   <html lang="en" >
   <head>
      <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
      <script type="text/javascript">    
         angular.module('firstApplication', ['ngMaterial'])
         .config(function($mdThemingProvider) {
          $mdThemingProvider.theme('default')
          .primaryPalette('light-green')
          .accentPalette('red')
          .warnPalette('green');
       });
      </script>
      <style type="text/css">
         .md-toolbar.md-default-theme:not(.md-menu-toolbar).md-warn, md-toolbar:not(.md-menu-toolbar).md-warn{
            color: white;
         }
      </style>
   </head>
   <body ng-app="firstApplication" ng-cloak>
      <md-toolbar class="md-primary md-hue-5">
         <div class="md-toolbar-tools">
            <h2 class="md-flex">My App</h2>
         </div>
      </md-toolbar>
      <md-content class="md-padding">
         <div layout="row" layout-align="center stretch">
            <div layout="column" flex-sm="80" layout-align="center stretch" flex flex-gt-xs="40">
               <md-card flex="60" class="md-padding" >
                  <div layout="column" layout-align="center center">
                     <img src="https://material.angularjs.org/1.0.1/img/icons/angular-logo.svg" flex >
                     <h4>Login to your account</h4>
                  </div>
                   <md-card-content>
                     <md-input-container class="md-icon-float md-block">
                        <!-- Use floating label instead of placeholder -->
                        <label>Username</label>
                        <md-icon class="name">
                           <i class="material-icons ">perm_identity</i>
                        </md-icon>
                        <input ng-model="user.name" type="text">
                      </md-input-container>
                      <md-input-container class="md-icon-float md-block">
                        <!-- Use floating label instead of placeholder -->
                        <label>Password</label>
                        <md-icon class="name">
                           <i class="material-icons">lock</i>
                        </md-icon>
                        <input ng-model="user.name" type="password">
                      </md-input-container>
                      <div layout="row" layout-xs="column">
                      <md-checkbox class="md-primary" flex-gt-xs="70" md-no-ink>
                        <span style="line-height:32px;">
                           Remember Me
                        </span>
                      </md-checkbox>
                      <a href="http://google.com"  style="line-height:32px;"> Forgot Password? </a>
                      </div>
                      <div layout="row" layout-align="center center">
                        <md-button class="md-primary md-raised" flex="50"> Login </md-button>
                      </div>
                   </md-card-content>
               </md-card>
           </div>
         </div>

    </md-content>
   </body>
</html>

材料设计flex在Chrome以外的浏览器中不起作用

0 个答案: