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

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

  •  1
     
  •   nnnToTnnn · 229 天前 · 5185 次点击
    这是一个创建于 229 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

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

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

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

    antd 支持 ie9+
    antd pro 支持 ie11+

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

    例如

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