由于工作原因,项目大多需要做到兼容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开发的注意事项相关推荐

  1. 前端企业微信开发内嵌H5记录

    前端企业微信开发内嵌H5记录(Vue) 文章目录 前端企业微信开发内嵌H5记录(Vue) 一.引入相应JS-SDK 1.JS-SDK 二.授权(网页授权) 1.构造网页授权链接 2.发起授权 3.注入 ...

  2. java下拉菜单_Web前端和Java开发哪个薪资更高,发展前景更好?

    互联网行业飞速发展,因此有很多小伙伴想要进入IT行业分一杯羹,但是学什么技术更好,哪一个语言的就业薪资更高,就成了困惑大家的主要问题. 网上关于"Web前端和Java开发谁的薪资高,发展前景 ...

  3. Web前端和后端开发的区别和要求

    Web前端和后端开发的区别和要求 有时候自己会分不清,其实是因为前后端都了解,类似于全栈工程师,但又什么都不是很精通.那到底什么是前端.后端呢,我整理了一些企业要求级别的前端/后端基础,开发框架等. ...

  4. Web前端页面设计流程及注意事项,谨记!

    每天我们打开电脑,看到各种各样的web前端页面.你知道他们是如何制作的吗?为了让页面更具有规范性,让使用者更加方便,在制作页面过程中必须遵循一定的设计流程.在这里就为大家详细介绍一下制作一个Web前端 ...

  5. 因分辨率变化html页面布局跳动_Web前端页面设计流程及注意事项,谨记!

    每天我们打开电脑,看到各种各样的web前端页面.你知道他们是如何制作的吗?为了让页面更具有规范性,让使用者更加方便,在制作页面过程中必须遵循一定的设计流程.在这里就为大家详细介绍一下制作一个Web前端 ...

  6. 2020前端最新面试题总结(js、html、小程序、React、ES6、Vue、算法、全栈热门视频资源)(3年前端菜鸟级开发师含泪总结)

    2020前端最新面试题总结(js.html.小程序.React.ES6.Vue.算法.全栈热门视频资源) 文档描述 (今年确实挺难 3年前端菜鸟级开发师含泪总结 希望能帮助大家) 本文是关注微信小程序 ...

  7. C# 开发CAD注意事项(二)-CAD不显示注记

    C# 开发CAD注意事项(二) 方法一.使用托管兼容模式 方法二.使用旧托管引擎 问题说明: VS2017调试(Debug)CAD的时候不显示注记或者文字,但是单独打开CAD,调用动态库就可以,解决办 ...

  8. 2022 前端常用的开发工具、组件库等等~持续整理,待你分享~

    2022 前端常用的开发工具.组件库等等持续整理,待你分享 小伙伴们!我这里整理了一些对前端开发有帮助的工具.库.网站等.对于这些东西有些是我自己用过的,有些是听过的,但是也有些是没听过也没用过的.只 ...

  9. sae php加密_ThinkPHP的SAE开发相关注意事项详解

    本文详细讲述了ThinkPHP的SAE开发相关注意事项.分享给大家供大家参考,具体如下: ThinkPHP的SAE开发和标准版本的ThinkPHP基本一样,你无需了解SAE的接口用法,ThinkPHP ...

最新文章

  1. python三层装饰器-python3装饰器
  2. JavaSript模块规范 - AMD规范与CMD规范介绍[转]
  3. 数据库分片教程mysql_简述MySQL分片中快速数据迁移
  4. Python编程学习:让函数更加灵活的*args和**kwargs(设计不同数量参数的函数)的简介、使用方法、经典案例之详细攻略
  5. nuxt.js的核心代码_Nuxt.js中的通用应用程序代码结构
  6. mysql学习笔记(1-安装简介)
  7. word域高级应用 if 域 域邮件合并的值的更改 日期的更改
  8. 405.数字转换为十六进制数
  9. PADS2007教程(三)——原理图和PCB封装建立关联
  10. 如何下载秦皇岛市卫星地图高清版大图
  11. 微博视频怎么下载?微博视频下载和保存工具
  12. python大一期末考试_python期末考试复习试卷
  13. webpack随笔04-webpack5压缩jscss
  14. 移动硬盘文件夹不见了怎么办?
  15. SystemVerilog学习-10-验证量化和覆盖率
  16. 【计算机网络】因特网通信
  17. 医院排队叫号系统源码 医院系统源码 医院源码
  18. 二维数组中根据一维数组筛选出对应数据,无数据默认为空
  19. 做一个快乐的程序员,去感受爱
  20. android手机信号测试,买手机别只看性能!教你测试手机信号好坏

热门文章

  1. 利用python分析电商_某电商平台数据分析报告(1)
  2. 企业家必读书籍有哪些?
  3. Python二进制、八进制、十进制、十六进制互转示例
  4. “谋杀”公关公司,企业级服务的一场阳谋
  5. 关于terra vista 6.2的一些问题交流
  6. aspen plus大小_ASPEN PLUS简介
  7. Nacos在Windows10启动失败问题解决办法
  8. 我为什么要在Android找工作越来越难的时候开始学习它
  9. 12个提升PostgreSQL_TSDB 插入性能的建议
  10. Window7 iis設定出錯0x8007000d