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

我有以下几点:

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

中间的&lt;span flex/&gt; 会将“右侧”推到右侧。这适用于 Chrome、Safari、Firefox、IE11 但不适用于 IE10。

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

有什么建议吗?

【问题讨论】:

  • caniuse.com/#search=flex 如你所见,在 IE 10 中不太支持
  • 其实ie10非常不支持。 ie11 虽然做得很好
  • 嘿,非常感谢您的 cmets。我看到 Flexie 已经过时了,似乎没有什么好的解决方案。 ://

标签: css angularjs internet-explorer-10 flexbox angular-material


【解决方案1】:

我最终得到的简单解决方案是将&lt;span&gt; 替换为&lt;div&gt;。而不是:

<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

更多信息:

【讨论】:

  • Angular Material 链接很有帮助。谢谢:)
  • 这激发了我的解决方案,只需将 span 替换为 div,我已将其作为您的答案。
猜你喜欢
  • 2016-08-27
  • 2021-07-02
  • 2021-09-10
  • 1970-01-01
  • 1970-01-01
  • 2019-03-23
  • 2016-12-26
  • 2019-07-14
  • 1970-01-01
相关资源
最近更新 更多