终于将 Ant Design Pro 兼容到 IE 9 了，一个星期了，脑壳疼。。。
nnnToTnnn · jhoneybee · 2019-10-09 16:22:16 +08:00 · 9520 次点击这是一个创建于 1873 天前的主题，其中的信息可能已经有所发展或是发生改变。
忙活了一个星期各种 polyfill，无奈最后还是放弃了 flex 布局。重写兼容的 css
话说 flexbox 的 polyfill 有那些对 umi 支持高的？
一句话，不要用 IE，你好我好大家都好。 头疼，脑壳疼
 |
1
devqin 2019-10-09 16:27:23 +08:00
这么刚？不用 babel+postcss+browserslist 的吗？
|
 |
2
shintendo 2019-10-09 16:34:05 +08:00
flex 还能 polyfill ？
|
 |
3
SilencerL 2019-10-09 16:41:26 +08:00
我司对 Ant Design 2.x 兼容到了 IE 8，3.X 兼容到了 IE 9。
我真的太佩服负责做兼容性工作的同事了，我感觉他们的头发是肉眼可见的日益增白…… “不要用 IE，你好我好大家都好。” +10086 |
 |
4
luvxy 2019-10-09 16:55:51 +08:00
antd 不是写中后台管理系统的吗 这特么还要兼容啊
|
 |
6
mamahaha 2019-10-09 17:06:53 +08:00
不怎么样，拿他学习行，正式的项目用这种东西，改都不好改。
|
|
7
devqin 2019-10-09 17:24:36 +08:00
@murmur browserslist 配置了之后，babel 和 postcss 都会读取配置去添加 ployfill 的，postcss 额外有几个处理 flex bug 的 plugin 需要添加
|
 |
8
sam014 2019-10-09 17:26:33 +08:00
你们 IE8 IE9 在哪里测试？ win7sp2 自带的都是 IE10，目前还有使用更古老的系统吗？
|
 |
9
lonelygo 2019-10-09 17:30:23 +08:00
对于这种还要面对 IE7、8、9 兼容的项目，硬刚新东西，真心服气。
|
 |
10
JetMac 2019-10-09 17:35:56 +08:00
真牛，我们只支持最新 Chrome。
|
 |
11
jjianwen68 2019-10-09 17:37:59 +08:00
现在可以放弃支持 ie6 了吧，还会有人只能用 ie6 且不愿意安装其他浏览器吗
|
 |
13
A2rael 2019-10-09 17:42:02 +08:00
怕不是国企
|
 |
15
liuxingbaoyu 2019-10-09 18:51:52 +08:00
太伟大了
|
 |
16
duan602728596 2019-10-09 18:57:45 +08:00 via iPhone
幸好我的只兼容到 chrome70 以上
|
 |
17
love 2019-10-09 19:00:52 +08:00
直接让客户放弃 IE 不是更合理吗
比如我用最新 Firefox 打开拼多多的商家后台管理，直接上面一个横幅： 亲请用最新版 Chrome，其它浏览器后果自负啥的 |
 |
18
LiuJiang 2019-10-09 19:03:47 +08:00
ie 自己都放弃自己了，居然还有人用 ie，哎
|
 |
19
wangyzj 2019-10-09 19:07:12 +08:00
你用全世界最先进的科技打造了一个能在非洲土路上驰骋的法拉利
|
 |
20
coolzilj 2019-10-09 19:13:12 +08:00 via Android
亲历的真事，不是段子。最近有一个客户投诉我们“推荐使用谷歌浏览器进行浏览”，因为“中美打着贸易战呢，我们公司都不用谷歌了，现在统一用 IE。你们怎么还推荐美国的产品？”我。。。
|
 |
21
caola 2019-10-09 19:22:57 +08:00
幸好我自己的项目，只考虑兼容 chrome latest 一个版本而已，
其它的兼容不兼容从来不考虑…… |
 |
24
azh7138m 2019-10-09 19:53:18 +08:00
|
 |
25
gdrk 2019-10-10 09:32:48 +08:00
NB ！党和人名不会忘记你的
|
 |
26
nnnToTnnn OP @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 |
|
27
nnnToTnnn OP 这些事情总结起来很简单，就四个因素，结果找了一个多星期，人都要崩溃了。。。。
|
|
28
nnnToTnnn OP @nnnToTnnn 至于无法兼容到 IE8 的原因是因为 antd 部分组件采用 flex 布局，而在 ie8 是彻底不支持 flex，所以
antd 支持 ie9+ antd pro 支持 ie11+ 最后 antd pro 也只能支持到 ie9 |
|
30
nnnToTnnn OP |
|
31
nnnToTnnn OP @shintendo 利用 postcss + flexibility 就可以填充 polyfill，尝试过，感觉效果不理想。
|
|
32
nnnToTnnn OP @shintendo 解决了一部分 issues 中提到的问题，但是发现在这样下去就是自己单独走一条路出来了，所以开始修改 css 兼容 flex 说白了就是调整项目代码,来兼容 ie
|
 |
33
miloooz 2019-10-10 15:20:17 +08:00
老哥的版本是 ant design pro 4.0 吗？搞了几天都搞不定 ie 兼容 ie11 都打不开页面
，看是 webpack-theme-color-replacer 包里报的错，和你的原因二有点类似，试着和那个一样的去解决，就可以了 就是又跳出一个语法错误的报错，让人头秃 |
 |
35
lifesimple 2020-08-18 10:15:34 +08:00
终于轮到我来兼容 IE8 头大
|
|
36
nnnToTnnn OP @lifesimple 兄弟, 如果是兼容 IE8, 真的，这条路算你自己一个人走了，以后维护成本非常高的。 现在我已经说服他们，使用 360 急速浏览器了。 兼容 IE9 后面很多特性不支持。相当麻烦的，兼容 IE8 更加麻烦。 建议你说服一下领导采用其他浏览器
|
Select Language