忙活了一个星期各种 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 更加麻烦。 建议你说服一下领导采用其他浏览器
|