【面试】兼任IE低版本思路方案

【主要是针对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;

 

猜你喜欢

转载自blog.csdn.net/fcvtb/article/details/88825694
今日推荐