终于将 Ant Design Pro 兼容到 IE 9 了，一个星期了，脑壳疼。。。

nnnToTnnn · 2019-10-09T08:22:16Z

忙活了一个星期各种 polyfill，无奈最后还是放弃了 flex 布局。重写兼容的 css 话说 flexbox 的 polyfill 有那些对 umi 支持高的？一句话，不要用 IE，你好我好大家都好。头疼，脑壳疼

polyfill

脑壳

兼容

星期

36 replies • 2020-08-18 10:54:44 +08:00

devqin

Oct 9, 2019

1

这么刚？不用 babel+postcss+browserslist 的吗？

shintendo

Oct 9, 2019

2

flex 还能 polyfill ？

SilencerL

Oct 9, 2019

3

我司对 Ant Design 2.x 兼容到了 IE 8，3.X 兼容到了 IE 9。
我真的太佩服负责做兼容性工作的同事了，我感觉他们的头发是肉眼可见的日益增白……
“不要用 IE，你好我好大家都好。” +10086

luvxy

Oct 9, 2019

4

antd 不是写中后台管理系统的吗这特么还要兼容啊

murmur

Oct 9, 2019

5

@devqin flex 布局拿头 babel 啊

mamahaha

Oct 9, 2019

6

不怎么样，拿他学习行，正式的项目用这种东西，改都不好改。

devqin

Oct 9, 2019

7

@murmur browserslist 配置了之后，babel 和 postcss 都会读取配置去添加 ployfill 的，postcss 额外有几个处理 flex bug 的 plugin 需要添加

sam014

Oct 9, 2019

8

你们 IE8 IE9 在哪里测试？ win7sp2 自带的都是 IE10，目前还有使用更古老的系统吗？

lonelygo

Oct 9, 2019

9

对于这种还要面对 IE7、8、9 兼容的项目，硬刚新东西，真心服气。

JetMac

Oct 9, 2019

10

真牛，我们只支持最新 Chrome。

jjianwen68

Oct 9, 2019

11

现在可以放弃支持 ie6 了吧，还会有人只能用 ie6 且不愿意安装其他浏览器吗

SilencerL

Oct 9, 2019

12

@sam014
IE 下用调试工具将模式改为 IE 8 或 IE 9，甚至还可以改成 IE 5 体验一下。

A2rael

Oct 9, 2019

13

怕不是国企

murmur

Oct 9, 2019

14

@devqin 学到了，我一直以为这么先进的特性要么放弃 IE 要么放弃 flex

liuxingbaoyu

Oct 9, 2019

15

太伟大了

duan602728596

Oct 9, 2019 via iPhone

16

幸好我的只兼容到 chrome70 以上

love

Oct 9, 2019

17

直接让客户放弃 IE 不是更合理吗

比如我用最新 Firefox 打开拼多多的商家后台管理，直接上面一个横幅：亲请用最新版 Chrome，其它浏览器后果自负啥的

jchencode

Oct 9, 2019

18

ie 自己都放弃自己了，居然还有人用 ie，哎

wangyzj

Oct 9, 2019

19

你用全世界最先进的科技打造了一个能在非洲土路上驰骋的法拉利

coolzilj

Oct 9, 2019 via Android

20

亲历的真事，不是段子。最近有一个客户投诉我们“推荐使用谷歌浏览器进行浏览”，因为“中美打着贸易战呢，我们公司都不用谷歌了，现在统一用 IE。你们怎么还推荐美国的产品？”我。。。

caola

Oct 9, 2019

21

幸好我自己的项目，只考虑兼容 chrome latest 一个版本而已，
其它的兼容不兼容从来不考虑……

asdjgfr

Oct 9, 2019

22

@coolzilj 把提示改成推荐使用 360 浏览器，QQ 浏览器，UC 浏览器等国产浏览器

rupert

Oct 9, 2019 via Android

23

@coolzilj IE 不也是美国的?

azh7138m

Oct 9, 2019

24

@sam014 微软提供了虚拟机
https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/

gdrk

Oct 10, 2019

25

NB ！党和人名不会忘记你的

nnnToTnnn

OP

Oct 10, 2019

26

@devqin
@shintendo
@murmur
@asdjgfr
@gdrk

对于 IE8 以下或者 IE8 是采用提示用户更新浏览器的策略。

然后采用 babel+postcss+browserslist 的方案进行兼容，但是由于 umi 的兼容性问题，导致在 IE10 的时候会异常

可以在官网上打开 https://preview.pro.ant.design/ 的时候就可以发现

Ant Design Pro 无法兼容 IE9 & IE 10 的原因是因为

原因一

因为 dynamicImport 导致在进行 Promise 的时候出现兼容问题

+ https://github.com/umijs/umi/issues/2391

> 解决方式就是简单的不使用 dynamicImport

原因二

在 IE 中没有正确的使用 babel 编译三方依赖

+ https://github.com/sorrycc/blog/issues/68

原因三

缺少 requestAnimationFrame 的 polyfill

原因四

缺少 flex 的 polyfill

一，二，三的原因很好解决，改下 config.js 的配置或引入 requestAnimationFrame 的 polyfill

目前四的原因不太好解决尝试过 flex polyfill，会导致布局出现过多的空白，和之前布局不一样

四的最终解决方案是

写 css 样式兼容 ie 的 flex，大概也就 20 几行 css 样式，代码中调整不要使用 flex 布局，采用 antd 的 Col 和 Row

nnnToTnnn

OP

Oct 10, 2019

27

这些事情总结起来很简单，就四个因素，结果找了一个多星期，人都要崩溃了。。。。

nnnToTnnn

OP

Oct 10, 2019

28

@nnnToTnnn 至于无法兼容到 IE8 的原因是因为 antd 部分组件采用 flex 布局，而在 ie8 是彻底不支持 flex，所以

antd 支持 ie9+
antd pro 支持 ie11+

最后 antd pro 也只能支持到 ie9

shintendo

Oct 10, 2019

29

@nnnToTnnn 很好奇 flex 的 polyfill 是什么原理，感觉超越了我的认知……

nnnToTnnn

OP

Oct 10, 2019

30

@shintendo 通过 js 修正 css 的错乱，也就是遍历 DOM 的样式。

例如

+ https://github.com/jonathantneal/flexibility

nnnToTnnn

OP

Oct 10, 2019

31

@shintendo 利用 postcss + flexibility 就可以填充 polyfill，尝试过，感觉效果不理想。

nnnToTnnn

OP

Oct 10, 2019

32

@shintendo 解决了一部分 issues 中提到的问题，但是发现在这样下去就是自己单独走一条路出来了，所以开始修改 css 兼容 flex 说白了就是调整项目代码,来兼容 ie

miloooz

Oct 10, 2019

33

老哥的版本是 ant design pro 4.0 吗？搞了几天都搞不定 ie 兼容 ie11 都打不开页面
，看是 webpack-theme-color-replacer 包里报的错，和你的原因二有点类似，试着和那个一样的去解决，就可以了
就是又跳出一个语法错误的报错，让人头秃

nnnToTnnn

OP

Oct 10, 2019

34

@zmlq7 是的，有点头疼，这个要一遍一遍的排查

lifesimple

Aug 18, 2020

35

终于轮到我来兼容 IE8 头大

nnnToTnnn

OP

Aug 18, 2020

36

@lifesimple 兄弟, 如果是兼容 IE8, 真的，这条路算你自己一个人走了，以后维护成本非常高的。现在我已经说服他们，使用 360 急速浏览器了。兼容 IE9 后面很多特性不支持。相当麻烦的，兼容 IE8 更加麻烦。建议你说服一下领导采用其他浏览器