谦容性问题大总结

兼容性总结：

1、event兼容性写法 var ev=ev||window.event

2、clientWidth 兼容写法

document.documentElement.clientWidth||document.body.clientWidth

3、ev.target Var target=ev.srcElement||ev.target

4、var scrollTop = windows.scrollTop || document.documentElement.scrollTop

5、ajax兼容性

if (window.XMLHttpRequest) {

//IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码

xmlhttp = new XMLHttpRequest();

} else {

//IE6, IE5 浏览器代码

xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

}

5、获取属性兼容性

if (window.getComputedStyle) {

//标准流

console.log(window.getComputedStyle(div1).width);

console.log(window.getComputedStyle(div1).cssFloat);

} else {

//IE兼容

console.log(div1.currentStyle.styleFloat);

}

6、绑定事件的兼容性

//绑定点击事件解决兼容性

if(window.addEventListener){

div1 = addEventListener("click",function(){console.log(123)})

}else{

//处理IE兼容

div1.attachEvent("onclick",function(){console.log(123)})

}

7、阻止事件冒泡的兼容性

if(document.all){ //只有ie识别
        e.cancelBubble=true;
    }else{
        e.stopPropagation();
    }

8、阻止默认事件

(1)ev.preventDefault(); (2)IE兼容写法 e.returnValue = false;

9、页面初始化，解决页面的兼容性问题

比如：标准模式有默认的内外边距 ie没有，

解决方法初始化 *{ magrin：0；padding：0；}

10、html5和css3兼容性问题

<!--[if lt IE 9]>

<![endif]—>

html5shiv.min.js IE兼容html5

respond.js IE兼容css3

11、css3内兼容性写法

div {

100px;

height: 100px;

background-color: red;

/* 画叶子 */

border-radius: 100px 10px 100px 10px;

/* 浏览器兼容谷歌 */

-webkit-border-radius: 100px 10px 100px 10px;

/* 欧朋 */

-o-border-radius: 100px 10px 100px 10px;

/* ie */

-ms-border-radius: 100px 10px 100px 10px;

/* 火狐 */

-moz-border-radius: 100px 10px 100px 10px;

margin: 0 auto;

}

12、opcaity兼容性

opicaty: n;

filter: alpha(opacity=n*100);