IE8兼容
1.所有文件都不能用中文命名,这个大家应该都懂,,,,然而我还是遇到有些同事这样做了,,,当时那个无语啊。。。。
2.使用 for in 对对象进行遍历时,需要加上判断 hasOwnProperty
否则,解析器会遍历到 types 的最后一个元素后,会遍历types 原型对象中的 indexOf,然后就会开始报错。
3.对 Event 对象在IE中也要进行兼容,event = event || window.event;在IE中事件的对象是 event.srcElement,在其他浏览器中则是event.target;直接用js注册事件时,在IE8中是用的attachEvent(非IE:addEventListener),解除时是用的detechEvent(非IE:removeEventListener)。
可以用 typeof window.addEventListener != “undefined”,或者直接 window.addEventListener 程序代码判断使用者的浏览器是否支持AddEventListener这个事件模型, 如果不支持就使用attachEvent。
且,addEventListener语法为addEventListener(event,function,capture/bubble), 而,attachEvent不需要指定capture/bubble的参数, 因为在windows IE环境下都是使用Bubble的模式。
4.在 IE中事件对象没有 localName这个属性,要用就用 nodeName,且nodeName对应输出的对象的标签名为大写(event.srcElement.nodeName==”INPUT”)。
5.在IE中,阻止事件源元素的默认行为: event.returnValue=false;在非IE中,为 event.preventDefault(); 在IE中,阻止事件冒泡,即阻止事件传播到包容对象: event.cancelBubble=true; 在非IE中,为 event.stopPropagation()。
6.在Firefox 3.5+中,放置事件的默认行为是打开被放到放置目标上的url。如果是把图像拖到放置目标上,页面就会转向图像文件。如果是把文本拖放到放置目标上,则会导致无效url错误。所以为了让Firefox支持政正常的拖放,还要取消drop事件的默认行为,阻止打开拖拽元素的URL。
7.对元素的宽高等的读取不要试图直接读取元素的内联样式中的 width或height(element.style['height'])(像是highcharts就直接这样做了。。。),因为在IE8中如果元素是按的百分比来写的话,会直接把数字读取过来而不是进行转换再读取,建议使用 width() 或 height()。
8.且IE8中窗口 iframe 是无法继承父元素的百分比高度的,如果需要iframe继承父元素高度,需要先得出父元素高度,如本来父元素的内联样式写了style=”height:80%”,用iframe是得不到高度的,此时需要iframe.parent().height(iframe.parent().height())。
9.使用 jquery.dataTables.js 该插件时,最好不要在表格已经渲染后的回调中重新进行删除列增加列等操作。在google中插件会重新计算元素宽度适配,但是在IE8中不会,所以回出现空出一列或是其他情况。。。
10.删除相关插件的时候最好是按着插件自己删除方法来,像是弹窗中用了上传插件,关闭弹窗的时候同事直接用的将该弹窗相关代码全部删除掉,但是因为该插件本身的设计中有把按钮相关的标签名绑定到window对象,所以会导致在IE8中第二次开弹窗的时候一直报错。
11.在IE8中对input 框使用 readonly 仍然能使鼠标聚焦在该input 框中, 要对它使用 ele.attr('unselectable','on')。
12.IE9以下不支持 opacity,如要用到,请使用filter:alpha(opacity=50);
13.由于IE8不支持 placeholder,所以增加了改善这一问题的插件,在注意新增的模块中有placeholder的input框时,要对其进行$(input).placeholder()。
14.IE8支持:fisrt-child,不支持 :last-child,也不支持:nth-child。
15.IE8对rgba支持不好:background: rgba(255,255,255,.8) 转成:filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#c8ffffff,endColorstr=#c8ffffff)。
16.IE8不支持CSS3的很多新特性,像是,border-radius、box-shadow、border-image、multiple background images、linear-gradient等,可以通过引入.htc文件,或使用PIE.js进行兼容。
17.IE8 中字符串对象或字符串基本类型生成的包装对象都是没有trim()方法的。像 $(t).text().trim()=="待办工作" 应写为: $.trim($(t).text())=="待办工作"。
18.对对象属性的引用尽量使用字符串形式,避免不小心使用到关键字和保留字,如 object['default'] 而不是 object.default 第二种情况在google不会报错,但是在IE8会报错。
19.IE8 不支持select 标签的onchange事件,建议改成 click事件。
20.IE8认为 radio标签的 onchange事件是在它失去焦点时触发,这个时候最好做一下判断,或者用jquery的事件名绑定事件或是on绑定事件。
21.当页面有要复制粘贴元素的时候,要注意元素ID不能重复,这个在google还说不怎么会有问题,但是在IE8容错性很低的情况下,就问题大了。
22.IE8中数组没有 indexOf方法,可自行对数组原型对象进行修改(上面提到的trim()方法也是)。
23.要在IE中跨域调用数据,要进行以下设置: 工具 >> Internet选项 >> 安全 >> 自定义级别: