大发龙虎稳赢首页    注册   登录
大发龙虎稳赢 = way to explore
大发龙虎稳赢 是一个大发龙虎稳赢关于 分享和探索的地方
现在注册
已注册用户请  登录
大发龙虎稳赢  ›  程序员

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

  •  1
     
  •   nnnToTnnn · 13 天前 · 2329 次点击

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

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

    一句话,不要用 IE,大发龙虎稳赢你 好大发龙虎稳赢我 好大家都好。 头疼,脑壳疼

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

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

    antd 支持 ie9+
    antd pro 支持 ie11+

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

    例如

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