之前写过一篇chrome49兼容elementplus的文章,在后续公司研发中,买了一个vue2的项目,原项目组并没有兼容性要求,我们公司是需要兼容49的,在做了垫片后发现很多比较奇葩的问题,现在写下来,防止后人踩坑,目前列出来的都是遇到的,后续也会持续补充
关键的flex,原项目中写了大量的height:100%,后续接手我们选择进行了flex + flex-1 改造,高度通过flex-1继承,但是并没有删除原有的高度属性,最新浏览器中无异常,在49环境中,高度的优先级目测大于flex-1,flex-1不生效了,删除所有flex元素上的hegiht属性,页面正常
关键的grid,该项目中使用了flex+ivv-table的构建,在没有数据的情况下会导致宽度无限加上,不知道你们有没有遇到过,网上发现antd、element也有可能有类似问题,不知道有没有后续fixed,看到比较好的方法是设置表格父元素grid布局,之前也是用这个方法解决了,但是后来看chrome49根本不兼容这个属性,大概了解了下49应该是16年的版本,当时grid还在提案,还有子绝父相的方法,我这里因为样式不太适应,其实直接写死宽度也能解决
/deep/ .ivu-table-wrapper {
width: 100% !important;
.ivu-table-header table, .ivu-table-body table, .ivu-table-tip table {
width: 100% !important;
table-layout: auto;
}
}
定位:在子元素未撑开父元素宽度时,最新浏览器的绝对定位不需要写死right:0,也能撑开,但是49环境必须写上left/right
新增axios 1.6.x 不兼容chrome49 建议写死版本
新增不支持16进制透明度设置 建议使用rgba