IE10中的Angular Material 不占用空间答案

【问题标题】：Angular Material in IE10 doesn't take up spaceIE10中的Angular Material 不占用空间
【发布时间】：2016-01-21 20:06:04
【问题描述】：

我有以下几点：

<div layout="row">
  <span>Left side</span>
  <span flex/>
  <span>Right side</span>
</div>

中间的 会将“右侧”推到右侧。这适用于 Chrome、Safari、Firefox、IE11 但不适用于 IE10。

Angular Material 的 flex 属性看起来添加了 -ms 细节，但显然不适用于 IE10。

有什么建议吗？

【问题讨论】：

【解决方案1】：

我最终得到的简单解决方案是将 替换为<div>。而不是：

<div layout="row">
  <span>Left side</span>
  <span flex/>
  <span>Right side</span>
</div>

用途：

<div layout="row">
  <div>Left side</div>
  <div flex/>
  <div>Right side</div>
</div>

这在 IE10 上运行良好。

【讨论】：

【解决方案2】：

IE10 不支持current flexbox specification。

它只支持old "tweener" syntax，几乎没有其他浏览器使用，无论是当前浏览器还是recently superseded。

如果您确实需要 IE10 中的 flexbox 支持，请记住，您需要使用前缀，并且一些当前可用的 flex 属性（例如，justify-content: space-around）根本不可用。

由于它与 Angular 材质有关，这里有更多信息：flexbox layout doesn't work in IE10

更多信息：

【讨论】：