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

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

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

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

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

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

    34 回复  |  直到 2019-10-10 16:53:45 +08:00
        1
    devqin   11 天前
    这么刚?不用 babel+postcss+browserslist 的吗?
        2
    shintendo   11 天前
    flex 还能 polyfill ?
        3
    SilencerL   11 天前
    我司对 Ant Design 2.x 兼容到了 IE 8,3.X 兼容到了 IE 9。
    我真的太佩服负责做兼容性工作的同事了,我感觉他们的头发是肉眼可见的日益增白……
    “不要用 IE,你好我好大家都好。” +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 天前
    你们 IE8 IE9 在哪里测试? win7sp2 自带的都是 IE10,目前还有使用更古老的系统吗?
        9
    lonelygo   11 天前
    对于这种还要面对 IE7、8、9 兼容的项目,硬刚新东西,真心服气。
        10
    JetMac   11 天前
    真牛,我们只支持最新 Chrome。
        11
    jjianwen68   11 天前
    现在可以放弃支持 ie6 了吧,还会有人只能用 ie6 且不愿意安装其他浏览器吗
        12
    SilencerL   11 天前
    @sam014
    IE 下用调试工具将模式改为 IE 8 或 IE 9,甚至还可以改成 IE 5 体验一下。
        13
    A2rael   11 天前
    怕不是国企
        14
    murmur   11 天前
    @devqin 学到了,我一直以为这么先进的特性要么放弃 IE 要么放弃 flex
        15
    liuxingbaoyu   11 天前
    太伟大了
        16
    duan602728596   11 天前 via iPhone
    幸好我的只兼容到 chrome70 以上
        17
    love   11 天前
    直接让客户放弃 IE 不是更合理吗

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

    antd 支持 ie9+
    antd pro 支持 ie11+

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

    例如

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