【主要是针对ie6 7 8对支持和让老浏览器支持html5+css3的一些js脚本】
html5shiv.js // 让IE8及耕地版本的IE识别section,article,nav等html5元素
CSS3Pie(www.css3pie.com) // 让IE6-IE9支持圆角,背景渐变,边框图片,盒子阴影,RGBa颜色可视化的css3功能
前端开发兼容低版本IE注意事项
1.如果要在地址中使用中文参数的话,使用encodeURIComponent()对中文进行编码,否则在老版本的IE中可能出现地址错误(400)。
2.在任何业务情况下,后台传过来,前端解析的参数都要明确的值,即使是‘’或者[],尽量不要存在null, 如果可能会出现不同的对象走同一条业务流程,加上if("undefined"!==typeof obj.xxx){},不要出现未定义的对象,它会使低版本的IE报错。
3.当前使用的使IE8兼容placeholder属性的placeholder.js,在IE8中会使input的值变为提示信息,注意进行判断。
5.尽量不要使用敏感的字符作为对象,比如’import‘,如果一定要用,使用obj['import']进行引用,不要使用obj.import。
9.低版本ie上可能出现选定input时光标跳到最前的bug,此时可以添加focus监听事件根据输入值移到最后。
10.任何完整的js语句之后都应该加‘;’,否则压缩后的js或低版本的IE会因此报错。
11.IE8不支持rgba颜色格式,要加透明度请使用opacity属性。
12.低版本IE并不支持console语句,兼容需要全局定义一个window.console方法。
13.低版本IE对象遍历(for in)结果会出现乱序现象。
14.IE游览器无法解析时间格式为"yyyy-MM-dd hh:mm:ss"类型的时间,显示为NaN。" yyyy/MM/dd hh:mm:ss"为主流浏览器支持的格式。
1、ie6,7,8对H5标签兼容
页面中引入html5shiv.js,下载地址:https://github.com/aFarkas/html5shiv
2、IE6双边距
当元素浮动后,再设置同方向margin,会产生双边距
解决:增加
*display:inline;
3、IE6最小高度问题
IE6下最小高度19px,想小于此高度,增加
*overflow:hidden;
4、li里元素都浮动 li 在IE6 7 下方会产生4px间隙问题
针对li添加
*vertical-align: top;
5、浮动元素之间注释,导致多复制一个文字问题
两个浮动元素中间有注释或者内联元素并且和父级宽度相差不超过3px时,
1)两个浮动元素中间避免出现内联元素或者注释
2)与父级宽度相差3px或以上
6、IE6 7 父级元素的overflow:hidden 是包不住子级的relative
针对ie6、7给父级元素添加相对定位
overflow: hidden;
*position: relative;