角度材料布局-对齐空间-在 IE 中不起作用
Posted
技术标签:
【中文标题】角度材料布局-对齐空间-在 IE 中不起作用【英文标题】：angular material layout-align space-between does not work in IE 【发布时间】：2017-05-22 20:54:01 【问题描述】：我正在为我的网络应用程序使用 angular-material，下面是我的主要模板：
<body>
<div layout="column" layout-fill ng-controller="MainController">
<ng-include src="'/app/main/views/sidenav.template.html'"></ng-include>
<md-toolbar class="md-primary md-hue-2" ng-include="'/app/main/views/menu.template.html'">
</md-toolbar>
<md-content layout="column" layout-align="space-between stretch">
<div ui-view></div>
<div class="footer" ng-include="'/app/main/views/footer.template.html'">
</div>
</md-content>
</div>
</body>
我在 Internet Explorer 11 上出现了一个问题。即使我将 layout-align 设置为“space-between”，根据文档，它应该将我的第二个 div（具有“footer”类的那个）放在页面底部，它不适用于 IE11。看起来第一个 div（具有 ui-view 属性的那个）的高度计算错误并且太低了。
你可以在http://ldzkklim.ayz.pl/看到它
IE 有什么解决方法吗？或者我在模板中做错了什么？
CodePen链接查看问题：http://codepen.io/anon/pen/ygOLBM
【问题讨论】：
IE11 中的垂直定位有时很粗略。但是，我认为您不应该为此使用 space-between 。确保在 `layout="column|row"` 元素中使用flex。如果您需要更多帮助，请提供 codepen 或其他基本布局。
@kuhnroyal 我添加了一个指向 codepen 的链接。如果你在 IE 上运行它，你可以看到有什么问题。在谷歌浏览器上一切都很好。
【参考方案1】：
不要把layout="column" layout-align="space-between stretch"放在md-content上，如果你需要某种垂直间距，你应该总是添加一个孩子并把它放在上面。这只是根据我的经验，但它似乎也适用于此。
<md-content flex>
<div flex layout="column" layout-align="space-between stretch">
<div flex>content...</div>
<div>footer</div>
</div>
</md-content>
【讨论】：
它确实有帮助，但还有一件事。如果第一个 div 太短，则第二个 div（页脚）不在底部。 codepen.io/anon/pen/KazewY 这是一个密码笔。这是 md-content 错误 - 它的高度太小。 尝试将flex 添加到内容div。以上是关于角度材料布局-对齐空间-在 IE 中不起作用的主要内容，如果未能解决你的问题，请参考以下文章