前端兼容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了
前端兼容ie开发的注意事项相关推荐
- 前端企业微信开发内嵌H5记录
前端企业微信开发内嵌H5记录(Vue) 文章目录 前端企业微信开发内嵌H5记录(Vue) 一.引入相应JS-SDK 1.JS-SDK 二.授权(网页授权) 1.构造网页授权链接 2.发起授权 3.注入 ...
- java下拉菜单_Web前端和Java开发哪个薪资更高,发展前景更好?
互联网行业飞速发展,因此有很多小伙伴想要进入IT行业分一杯羹,但是学什么技术更好,哪一个语言的就业薪资更高,就成了困惑大家的主要问题. 网上关于"Web前端和Java开发谁的薪资高,发展前景 ...
- Web前端和后端开发的区别和要求
Web前端和后端开发的区别和要求 有时候自己会分不清,其实是因为前后端都了解,类似于全栈工程师,但又什么都不是很精通.那到底什么是前端.后端呢,我整理了一些企业要求级别的前端/后端基础,开发框架等. ...
- Web前端页面设计流程及注意事项,谨记!
每天我们打开电脑,看到各种各样的web前端页面.你知道他们是如何制作的吗?为了让页面更具有规范性,让使用者更加方便,在制作页面过程中必须遵循一定的设计流程.在这里就为大家详细介绍一下制作一个Web前端 ...
- 因分辨率变化html页面布局跳动_Web前端页面设计流程及注意事项,谨记!
每天我们打开电脑,看到各种各样的web前端页面.你知道他们是如何制作的吗?为了让页面更具有规范性,让使用者更加方便,在制作页面过程中必须遵循一定的设计流程.在这里就为大家详细介绍一下制作一个Web前端 ...
- 2020前端最新面试题总结(js、html、小程序、React、ES6、Vue、算法、全栈热门视频资源)(3年前端菜鸟级开发师含泪总结)
2020前端最新面试题总结(js.html.小程序.React.ES6.Vue.算法.全栈热门视频资源) 文档描述 (今年确实挺难 3年前端菜鸟级开发师含泪总结 希望能帮助大家) 本文是关注微信小程序 ...
- C# 开发CAD注意事项(二)-CAD不显示注记
C# 开发CAD注意事项(二) 方法一.使用托管兼容模式 方法二.使用旧托管引擎 问题说明: VS2017调试(Debug)CAD的时候不显示注记或者文字,但是单独打开CAD,调用动态库就可以,解决办 ...
- 2022 前端常用的开发工具、组件库等等~持续整理,待你分享~
2022 前端常用的开发工具.组件库等等持续整理,待你分享 小伙伴们!我这里整理了一些对前端开发有帮助的工具.库.网站等.对于这些东西有些是我自己用过的,有些是听过的,但是也有些是没听过也没用过的.只 ...
- sae php加密_ThinkPHP的SAE开发相关注意事项详解
本文详细讲述了ThinkPHP的SAE开发相关注意事项.分享给大家供大家参考,具体如下: ThinkPHP的SAE开发和标准版本的ThinkPHP基本一样,你无需了解SAE的接口用法,ThinkPHP ...
最新文章
- python三层装饰器-python3装饰器
- JavaSript模块规范 - AMD规范与CMD规范介绍[转]
- 数据库分片教程mysql_简述MySQL分片中快速数据迁移
- Python编程学习:让函数更加灵活的*args和**kwargs(设计不同数量参数的函数)的简介、使用方法、经典案例之详细攻略
- nuxt.js的核心代码_Nuxt.js中的通用应用程序代码结构
- mysql学习笔记(1-安装简介)
- word域高级应用 if 域 域邮件合并的值的更改 日期的更改
- 405.数字转换为十六进制数
- PADS2007教程(三)——原理图和PCB封装建立关联
- 如何下载秦皇岛市卫星地图高清版大图
- 微博视频怎么下载?微博视频下载和保存工具
- python大一期末考试_python期末考试复习试卷
- webpack随笔04-webpack5压缩jscss
- 移动硬盘文件夹不见了怎么办?
- SystemVerilog学习-10-验证量化和覆盖率
- 【计算机网络】因特网通信
- 医院排队叫号系统源码 医院系统源码 医院源码
- 二维数组中根据一维数组筛选出对应数据,无数据默认为空
- 做一个快乐的程序员,去感受爱
- android手机信号测试,买手机别只看性能!教你测试手机信号好坏