V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
nnnToTnnn
V2EX  ›  程序员

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

  •  1
     
  •   nnnToTnnn ·
    jhoneybee · 2019-10-09 16:22:16 +08:00 · 9506 次点击
    这是一个创建于 1857 天前的主题,其中的信息可能已经有所发展或是发生改变。

    忙活了一个星期各种 polyfill,无奈最后还是放弃了 flex 布局。重写兼容的 css

    话说 flexbox 的 polyfill 有那些对 umi 支持高的?

    一句话,不要用 IE,你好我好大家都好。 头疼,脑壳疼

    36 条回复    2020-08-18 10:54:44 +08:00
    devqin
        1
    devqin  
       2019-10-09 16:27:23 +08:00
    这么刚?不用 babel+postcss+browserslist 的吗?
    shintendo
        2
    shintendo  
       2019-10-09 16:34:05 +08:00
    flex 还能 polyfill ?
    SilencerL
        3
    SilencerL  
       2019-10-09 16:41:26 +08:00
    我司对 Ant Design 2.x 兼容到了 IE 8,3.X 兼容到了 IE 9。
    我真的太佩服负责做兼容性工作的同事了,我感觉他们的头发是肉眼可见的日益增白……
    “不要用 IE,你好我好大家都好。” +10086
    luvxy
        4
    luvxy  
       2019-10-09 16:55:51 +08:00
    antd 不是写中后台管理系统的吗 这特么还要兼容啊
    murmur
        5
    murmur  
       2019-10-09 17:02:42 +08:00
    @devqin flex 布局拿头 babel 啊
    mamahaha
        6
    mamahaha  
       2019-10-09 17:06:53 +08:00
    不怎么样,拿他学习行,正式的项目用这种东西,改都不好改。
    devqin
        7
    devqin  
       2019-10-09 17:24:36 +08:00
    @murmur browserslist 配置了之后,babel 和 postcss 都会读取配置去添加 ployfill 的,postcss 额外有几个处理 flex bug 的 plugin 需要添加
    sam014
        8
    sam014  
       2019-10-09 17:26:33 +08:00
    你们 IE8 IE9 在哪里测试? win7sp2 自带的都是 IE10,目前还有使用更古老的系统吗?
    lonelygo
        9
    lonelygo  
       2019-10-09 17:30:23 +08:00
    对于这种还要面对 IE7、8、9 兼容的项目,硬刚新东西,真心服气。
    JetMac
        10
    JetMac  
       2019-10-09 17:35:56 +08:00
    真牛,我们只支持最新 Chrome。
    jjianwen68
        11
    jjianwen68  
       2019-10-09 17:37:59 +08:00
    现在可以放弃支持 ie6 了吧,还会有人只能用 ie6 且不愿意安装其他浏览器吗
    SilencerL
        12
    SilencerL  
       2019-10-09 17:38:30 +08:00
    @sam014
    IE 下用调试工具将模式改为 IE 8 或 IE 9,甚至还可以改成 IE 5 体验一下。
    A2rael
        13
    A2rael  
       2019-10-09 17:42:02 +08:00
    怕不是国企
    murmur
        14
    murmur  
       2019-10-09 18:36:48 +08:00
    @devqin 学到了,我一直以为这么先进的特性要么放弃 IE 要么放弃 flex
    liuxingbaoyu
        15
    liuxingbaoyu  
       2019-10-09 18:51:52 +08:00
    太伟大了
    duan602728596
        16
    duan602728596  
       2019-10-09 18:57:45 +08:00 via iPhone
    幸好我的只兼容到 chrome70 以上
    love
        17
    love  
       2019-10-09 19:00:52 +08:00
    直接让客户放弃 IE 不是更合理吗

    比如我用最新 Firefox 打开拼多多的商家后台管理,直接上面一个横幅: 亲请用最新版 Chrome,其它浏览器后果自负啥的
    LiuJiang
        18
    LiuJiang  
       2019-10-09 19:03:47 +08:00
    ie 自己都放弃自己了,居然还有人用 ie,哎
    wangyzj
        19
    wangyzj  
       2019-10-09 19:07:12 +08:00
    你用全世界最先进的科技打造了一个能在非洲土路上驰骋的法拉利
    coolzilj
        20
    coolzilj  
       2019-10-09 19:13:12 +08:00 via Android
    亲历的真事,不是段子。最近有一个客户投诉我们“推荐使用谷歌浏览器进行浏览”,因为“中美打着贸易战呢,我们公司都不用谷歌了,现在统一用 IE。你们怎么还推荐美国的产品?”我。。。
    caola
        21
    caola  
       2019-10-09 19:22:57 +08:00
    幸好我自己的项目,只考虑兼容 chrome latest 一个版本而已,
    其它的兼容不兼容从来不考虑……
    asdjgfr
        22
    asdjgfr  
       2019-10-09 19:23:44 +08:00
    @coolzilj 把提示改成推荐使用 360 浏览器,QQ 浏览器,UC 浏览器等国产浏览器
    rupert
        23
    rupert  
       2019-10-09 19:50:51 +08:00 via Android
    @coolzilj IE 不也是美国的?
    azh7138m
        24
    azh7138m  
       2019-10-09 19:53:18 +08:00
    gdrk
        25
    gdrk  
       2019-10-10 09:32:48 +08:00
    NB !党和人名不会忘记你的
    nnnToTnnn
        26
    nnnToTnnn  
    OP
       2019-10-10 10:11:08 +08:00
    @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
        27
    nnnToTnnn  
    OP
       2019-10-10 10:13:02 +08:00
    这些事情总结起来很简单,就四个因素,结果找了一个多星期,人都要崩溃了。。。。
    nnnToTnnn
        28
    nnnToTnnn  
    OP
       2019-10-10 10:15:37 +08:00
    @nnnToTnnn 至于无法兼容到 IE8 的原因是因为 antd 部分组件采用 flex 布局,而在 ie8 是彻底不支持 flex,所以

    antd 支持 ie9+
    antd pro 支持 ie11+

    最后 antd pro 也只能支持到 ie9
    shintendo
        29
    shintendo  
       2019-10-10 10:17:42 +08:00
    @nnnToTnnn 很好奇 flex 的 polyfill 是什么原理,感觉超越了我的认知……
    nnnToTnnn
        30
    nnnToTnnn  
    OP
       2019-10-10 10:21:19 +08:00
    @shintendo 通过 js 修正 css 的错乱,也就是遍历 DOM 的样式。

    例如

    + https://github.com/jonathantneal/flexibility
    nnnToTnnn
        31
    nnnToTnnn  
    OP
       2019-10-10 10:22:30 +08:00
    @shintendo 利用 postcss + flexibility 就可以填充 polyfill,尝试过,感觉效果不理想。
    nnnToTnnn
        32
    nnnToTnnn  
    OP
       2019-10-10 10:25:25 +08:00
    @shintendo 解决了一部分 issues 中提到的问题,但是发现在这样下去就是自己单独走一条路出来了,所以开始修改 css 兼容 flex 说白了就是调整项目代码,来兼容 ie
    miloooz
        33
    miloooz  
       2019-10-10 15:20:17 +08:00
    老哥的版本是 ant design pro 4.0 吗?搞了几天都搞不定 ie 兼容 ie11 都打不开页面
    ,看是 webpack-theme-color-replacer 包里报的错,和你的原因二有点类似,试着和那个一样的去解决,就可以了
    就是又跳出一个语法错误的报错,让人头秃
    nnnToTnnn
        34
    nnnToTnnn  
    OP
       2019-10-10 16:53:45 +08:00
    @zmlq7 是的,有点头疼,这个要一遍一遍的排查
    lifesimple
        35
    lifesimple  
       2020-08-18 10:15:34 +08:00
    终于轮到我来兼容 IE8 头大
    nnnToTnnn
        36
    nnnToTnnn  
    OP
       2020-08-18 10:54:44 +08:00
    @lifesimple 兄弟, 如果是兼容 IE8, 真的,这条路算你自己一个人走了,以后维护成本非常高的。 现在我已经说服他们,使用 360 急速浏览器了。 兼容 IE9 后面很多特性不支持。相当麻烦的,兼容 IE8 更加麻烦。 建议你说服一下领导采用其他浏览器
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   950 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 20:52 · PVG 04:52 · LAX 12:52 · JFK 15:52
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.