谦容性问题大总结

兼容性总结：

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]>

　　<script src="//cdn.bootcss.com/respond.js/1.4.2/respond.js"></script>

 　　<script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>

<![endif]—>

html5shiv.min.js IE兼容html5

respond.js IE兼容css3

 

11、css3内兼容性写法 

 div {

            width: 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);