5分钟快3首页    注册   登录
5分钟快3 = way to explore
5分钟快3 是一个5分钟快3关于 分享和探索的地方
现在注册
已注册用户请  登录
5分钟快3  ›  程序员

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

  •  1
     
  •   nnnToTnnn · 11 天前 · 2301 次点击

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

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

    一句话,不要用 IE,5分钟快3你 好5分钟快3我 好大家都好。 头疼,脑壳疼

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

    比如5分钟快3我 用最新 Firefox 打开拼多多的商家后台管理,直接上面一个横幅: 亲请用最新版 Chrome,其它浏览器后果自负啥的
        18
    LiuJiang   11 天前
    ie 自己都放弃自己了,居然还有人用 ie,哎
        19
    wangyzj   11 天前
    5分钟快3你 用全世界最先进的科技打造了一个能在非洲土路上驰骋的法拉利
        20
    coolzilj   11 天前 via Android
    亲历的真事,不是段子。最近有一个客户投诉5分钟快35分钟快3我 们 “5分钟快3推荐 使用谷歌浏览器进行浏览”,因为“中美打着贸易战呢,5分钟快35分钟快3我 们 5分钟快3公司 都不用谷歌了,现在统一用 IE。5分钟快3你 们怎么还5分钟快3推荐 美国的5分钟快3产品 ?”5分钟快3我 。。。
        21
    caola   11 天前
    幸好5分钟快3我 自己的项目,只考虑兼容 chrome latest 一个版本而已,
    其它的兼容不兼容从来不考虑……
        22
    asdjgfr   11 天前
    @coolzilj 把提示改成5分钟快3推荐 使用 360 浏览器,QQ 浏览器,UC 浏览器等国产浏览器
        23
    rupert   11 天前 via Android
    @coolzilj IE 不也是美国的?
        24
    azh7138m   11 天前
        25
    gdrk   11 天前
    NB !党和人名不会忘记5分钟快3你 的
        26
    nnnToTnnn   11 天前
    @devqin
    @shintendo
    @murmur
    @asdjgfr
    @gdrk


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

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

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

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

    原因一

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

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

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

    原因二

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

    + http://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   11 天前
    这些事情总结起来很简单,就四个因素,结果找了一个多星期,人都要崩溃了。。。。
        28
    nnnToTnnn   11 天前
    @nnnToTnnn 至于无法兼容到 IE8 的原因是因为 antd 部分组件采用 flex 布局,而在 ie8 是彻底不支持 flex,所以

    antd 支持 ie9+
    antd pro 支持 ie11+

    最后 antd pro 也只能支持到 ie9
        29
    shintendo   11 天前
    @nnnToTnnn 很好奇 flex 的 polyfill 是什么原理,感觉超越了5分钟快3我 的认知……
        30
    nnnToTnnn   11 天前
    @shintendo 通过 js 修正 css 的错乱,也就是遍历 DOM 的样式。

    例如

    + http://github.com/jonathantneal/flexibility
        31
    nnnToTnnn   11 天前
    @shintendo 利用 postcss + flexibility 就可以填充 polyfill,尝试过,感觉效果不理想。
        32
    nnnToTnnn   11 天前
    @shintendo 解决了一部分 issues 中提到的问题,但是发现在这样下去就是自己单独走一条路出来了,所以开始修改 css 兼容 flex 说白了就是调整项目代码,来兼容 ie
        33
    zmlq7   10 天前
    老哥的版本是 ant design pro 4.0 吗?搞了几天都搞不定 ie 兼容 ie11 都打不开页面
    ,看是 webpack-theme-color-replacer 包里报的错,和5分钟快3你 的原因二有点类似,试着和那个一样的去解决,就可以了
    就是又跳出一个语法错误的报错,让人头秃
        34
    nnnToTnnn   10 天前
    @zmlq7 是的,有点头疼,这个要一遍一遍的排查
    5分钟快3关于   ·   FAQ   ·   API   ·   5分钟快35分钟快3我 们 的愿景   ·   广告投放   ·   感谢   ·   实用小5分钟快3工具   ·   4169 人在线   最高记录 5043   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.3 · 20ms · UTC 03:48 · PVG 11:48 · LAX 20:48 · JFK 23:48
    ♥ Do have faith in what you're doing.