前端兼容ie开发的注意事项

由于工作原因,项目大多需要做到兼容ie9或者8的情况,我也很无奈,所以就记录一些工作中自己遇到,或者带的实习生弟弟们遇到的一些问题

html部分

问题:Ie9仅支持h5的部分标签,以及某些标签的部分属性,ie8以前我估摸着是全军覆没(弱弱的说一声我是估计哈)

解决:

1.不过在如今已经有成熟得解决方案了html5shim htmlshiv 你只需要引入这个js就能兼容大部分h5得标签了,你可以理解为人家用js createElenment的方式创建的footer header等看起来像h5的标签,这种方式能让你在ie678里使用h5的新标签,无非是一种输入习惯罢了

2.在项目中多看看meta标签的使用,尤其是一些meta标签是可以优先定义浏览器版本,内核(www.cnblogs.com/wangyang108…

问题:input标签的placeholder在ie9更低版本不显示问题

解决:网上有很多解决方案,大致就是用js去模拟,参考我的另外一篇文章,placeholder的折腾

问题:input标签后面自带一个X问题

解决:css可以解决的方案,自行百度

css部分

注意事项:布局方案来说,flex肯定会排除掉,即使ie10,11对flex的兼容性也不会特别友好,针对ie9我建议的布局方案是=>定位position布局,浮动float,table布局 其他样式,类似于transtion等动画,css3以后的属性也存在兼容性问题,所以产品经理跟你提的时候一定要冷静啊,不要给自己那么多996的希望

js部分

问题:console.log问题,ie8/ie9,经常有同事遇到打开F12才能运行

解决:清除console

问题:es6的语法

解决:尤其当你没有使用构建工具工程化前端项目的时候,更要注意js语法的规范性,这里建议打开自己编辑器的校验规则,当然如果你使用构建工具gulp,webpack能规避大部分的问题,借助一些转义babel等全局编译新的语法为es5的语法

针对日常需要兼容ie8 9开发的一些建议

1.UI库选择,在开发项目的时候我建议的是尽量使用别人做好兼容的框架,ui方面如果你的项目jq为主强烈建议layui(兼容ie8的ui库),easyui(一款严重被低估了的ui库,目前已经支持jq,vue,angula,react,并且性能很好,尤其在使用表格大数据渲染方面相当出色,采用虚拟滚动视图,渲染海量数据)

2.上传,ie9及Ie9以下目前的上传问题,ie9及以下不支持FileReader和formdata.(建议使用webupload上传插件,据说兼容ie6+),还有一些其他flash上传的插件兼容性都比较好uploadify,SWFUpload等等,使用方式类似webupload,所以为什么不选择百度的呢。

3.下载,最好是window.open,人类使用的浏览器基本无兼容问题,如果你运气不好,后端偏要你使用post方式下载,这里建议ajax配合download.js(一款开源的下载方案)

4.编码问题,某些实习生同学逻辑不太好就会写很多for循环嵌套什么的,也不是不好,你不出bug大家都开心,你一出bug让别人看的时候真的想捶死你,最恐怖的是ajax里面嵌套ajax,我遇到过嵌套6个ajax的小可爱,建议开发的时候使用es6的那些新语法,简单清晰明了,怕兼容问题你可以用lodashjs这些开源的函数式编程库,真的很简单**********当然这里的建议是给你一起做项目都是实习生的同学们

5.项目构建技术栈选择,切记开发前确认浏览器兼容的最低版本要求,根据反馈选择合适的前端技术栈,ie8及以下的建议使用jq+gulp工作流构建前端项目

6.当然兼容性问题很多,也很烦,所以最关键的还是自测,目前我发现大部分在线上遇到的问题其实本地也会遇到(想打死他,别拦我),尤其团队没有专业的测试,更需要做好自测功能,尤其spa项目,打包后放nginx运行一下是开发的基本操作。

这也算是闲下来随便写点随笔,不扯了,我又要去给我带的实习生们改bug了

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值