兼容性问题统计

兼容性总结：

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兼容性

/* ie8下不兼容 */

  opacity: 0.5;

filter: alpha(opacity=50);

 

13、ES6  IE兼容性

1、node官网（下载安装包.msi）：https://nodejs.org/

2、vscode打开终端 输入 node-v;

3、用npm安装babel  npm install babel-core@5 

 

引入，兼容性写法

<script src="../node_modules/babel-core/browser.min.js"></script>
<script type="text/babel">