1
Hey Angular Разработчики материалов. Угловой материал, конечно, красивый каркас, но IE ему не нравится.Угловой макет материала = «столбец» делает divs стек друг на друга на IE
Я пытаюсь использовать макет = столбец, когда на мобильном изображении (ширина < 600 пикселей). Вот responsive layout documentation.
Оба Chrome и Firefox работают хорошо, но при открытии на IE (версия 11) происходит что-то неприятное.
http://codepen.io/anon/pen/zGQmYX
<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>
я упростил код, чтобы макет колонки все время.
Есть ли исправление к этому? Я так сильно ударился головой о мой стол, я вот-вот упаду в обморок.
Вы хотите что-то вроде этого http://codepen.io/anon/pen/YXbJVN? editors = 101? –
Да, я упростил код, чтобы моя проблема выделялась, проблема сохраняется, когда вы настраиваете ширину окна <600 пикселей на IE в вашем случае. –
Я не уверен (cz Я использую linux и не имею IE), но я думаю, что высоты этих divs вызывают проблему. Попробуйте добавить минимальную высоту в стилях этих div и посмотреть, работает ли это. – Darwesh