chrome 上的布局与 firefox 上的不同

Question

我有以下基于 angular material 布局的布局：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Angular Material - Starter App</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"/>

    <link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Roboto:400,700'>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.8.3/angular-material.css"/>
    <link rel="stylesheet" href="./style.css"/>

</head>

<body ng-app="starterApp" layout="column">

    <div flex="20" flex-gt-md="25" flex-lg="25" flex-gt-lg="25" layout="column">
        <div flex="30" layout="row" layout-align="center">
            <div flex flex-gt-md="40" flex-lg="40" flex-gt-lg="40" layout="row">
                <md-toolbar flex="20" id="home" layout="row">
                    <h1>Navi1</h1>
                </md-toolbar>
                <md-toolbar flex layout="row">
                    <h1>Navi1</h1>
                </md-toolbar>
            </div>
        </div>
        <div flex layout="row" layout-align="center">
            <md-toolbar flex-gt-md="40" flex-lg="40" flex-gt-lg="40" layout="row">
                <h1>Navi2</h1>
            </md-toolbar>
        </div>
    </div>

    <div flex style="background-color:green">

    </div>



<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular-animate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular-aria.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.8.3/angular-material.js"></script>

<script type="text/javascript">

    angular
            .module('starterApp', ['ngMaterial'])
            .run(function ($log) {
                $log.debug("starterApp + ngMaterial running...");
            });

</script>

</body>
</html>

请在 firefox 和 chrome 上试一下，你会发现效果不一样，为什么？

Answer 1

在此订单上输入初始代码：

<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"/>
  <meta charset="utf-8">
  <meta name="description" content="">
  <title>Angular Material - Starter App</title>

chrome 上的布局与 firefox 上的不同

Layout on chrome works different then on firefox

css

firefox

google-chrome

angular-material