IE11 兼容性问题小记:Symbol 未定义 & Flex bug

2,887 阅读1分钟

1、Symbol 未定义

现象:

参考issue:github.com/babel/babel…

原因:

avoid using syntax in Babel that would depend on ES6 functionality that hasn't been polyfilled.

解决方法:

添加 babel-polyfill

2、Flex 兼容性

现象:

当前元素设置css后元素未按预期排版。

display:flex;
flex-direction:column;
justify-content:space-between;
  • 正常排版如下:

  • 异常排版:

3个部分堆叠到了一起,且向上部对齐(请自行脑补~)。

原因:

外部元素设置了 min-height,而当前元素未设置 height 导致引出了 ie 的 bug。

解决方法:

设置当前元素 height,即可。

height: 666px;