谦容性问题大总结

兼容性总结:

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

2clientWidth 兼容写法

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

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

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

5ajax兼容性

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

 

posted @ 2020-08-20 20:36  橘雎  阅读(132)  评论(0编辑  收藏  举报