Angularjs 角形材料布局=”；栏「；使DIV在IE上相互堆叠_Angularjs_Angular Material

Angularjs 角形材料布局=”；栏「；使DIV在IE上相互堆叠

angularjs angular-material

Angularjs 角形材料布局=”；栏「；使DIV在IE上相互堆叠,angularjs,angular-material,Angularjs,Angular Material,嘿，角材料开发者。棱角材料确实是一个漂亮的框架，但IE一点也不喜欢它我在移动视图（宽度

嘿，角材料开发者。棱角材料确实是一个漂亮的框架，但IE一点也不喜欢它

我在移动视图（宽度<600px）上尝试使用layout=列。这是你的电话号码

Chrome和Firefox都运行良好，但当在IE（11版）上打开时，一些不愉快的事情发生了


.md工具栏工具h1{
字体大小：继承；
字体大小：继承；
边缘：继承；
}
你好，世界
我在上面的移动设备上，在左边的大型设备上。
我在下面的移动设备上，在右边的大型设备上。
var app=angular.module（'StarterApp'，['ngMaterial']）；
app.controller（'AppCtrl'，['$scope'，'$mdSidenav'，函数（$scope，$mdSidenav）{
$scope.toggleSidenav=函数（menuId）{
$mdSidenav（menuId.toggle（）；
};
}]);

我简化了代码，所以布局一直是列

这有解决办法吗？我的头撞在桌子上的力度太大了，我都快晕过去了。

我不知道这是否有帮助，但我曾经在chrome上遇到过这个问题，在文档开头添加

解决了这个问题。

我不知道这是否有帮助，但我曾经在chrome上遇到过这个问题，在文档开头添加

解决了这个问题问题

你想要这样的东西吗？是的，我简化了代码以突出我的问题，当你调整窗口宽度时问题仍然存在。我不确定（cz我使用linux，没有IE），但我认为这些div的高度是造成问题的原因。尝试在这些div的样式中添加一个最小高度，看看这是否有效..它有效！但不是很理想…CodePan更新了。我想这是我目前必须要做的。你想要这样的东西吗？是的，我简化了代码，使我的问题突出，当你调整窗口宽度时问题仍然存在。我不确定（cz我使用linux，没有IE），但我认为这些div的高度是造成问题的原因。尝试在这些div的样式中添加一个最小高度，看看这是否有效..它有效！但不是很理想…CodePan更新了。我想这是我目前必须走的路。

<html lang="en" ng-app="StarterApp">
<head>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.9.4/angular-material.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=RobotoDraft:300,400,500,700,400italic">
    <meta name="viewport" content="initial-scale=1" />
    <style>
        .md-toolbar-tools h1 {
            font-size: inherit;
            font-weight: inherit;
            margin: inherit;
        }
    </style>
</head>
<body layout="column" ng-controller="AppCtrl">
    <md-toolbar layout="row">
        <div class="md-toolbar-tools">
            <md-button ng-click="toggleSidenav('left')" hide-gt-sm class="md-icon-button">
                <md-icon aria-label="Menu" md-svg-icon="https://s3-us-west-2.amazonaws.com/s.cdpn.io/68133/menu.svg"></md-icon>
            </md-button>
            <h1>Hello World</h1>
        </div>
    </md-toolbar>
    <div layout="row" flex>
        <md-sidenav layout="column" class="md-sidenav-left md-whiteframe-z2" md-component-id="left" md-is-locked-open="$mdMedia('gt-sm')">

        </md-sidenav>
        <div layout="column" flex id="content">
            <md-content layout="column" flex class="md-padding">
                <div layout="column">
                    <div flex>
                        I'm above on mobile, and to the left on larger devices.
                    </div>
                    <div flex>
                        I'm below on mobile, and to the right on larger devices.
                    </div>
                </div>
            </md-content>
        </div>
    </div>
    <!-- Angular Material Dependencies -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>

    <script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.10.1/angular-material.min.js"></script>
    <script>
        var app = angular.module('StarterApp', ['ngMaterial']);
        app.controller('AppCtrl', ['$scope', '$mdSidenav', function ($scope, $mdSidenav) {
            $scope.toggleSidenav = function (menuId) {
                $mdSidenav(menuId).toggle();
            };
        }]);
    </script>
</body>
</html>