Angular Material <span flex/> 在IE10中不占space

Question

我有以下内容：

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

中间 <span flex/> 会将 "Right side" 推向右侧。这适用于 Chrome、Safari、Firefox、IE11，但不适用于 IE10。

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

有什么建议吗？

Answer 1

它只支持old "tweener" syntax, which almost no other browser, either current or recently superseded，用途。

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

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

更多信息：

Answer 2

我最终得出的简单解决方案是将 <span> 替换为 <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 上运行良好。

Angular Material <span flex/> in IE10 doesn't take up space