js兼容性问题整合

获取标签不兼容问题：

IE8以下对通过类名获取元素的方法不兼容，那么为了解决这个兼容性问题，我们就要自己封装一个方法：

封装函数如下：

function getE(classname){
var all = document.getElementsByTagName('*'); //获取所有元素
var arr=[];   //定义一个空数组，用来装符合条件的元素
                for(var i=0;i<all.length;i++){
                    if(all[i].className == classname){  //验证所获取的所有的元素中是否有类名与要查找的类名相同的元素
                        arr.push(all[i]);   //将符合条件的数组放入预先准备好的数组中
                    }
                }
                return arr;//返回符合条件的所有元素
}

 

与scroll相关的兼容性问题

谷歌浏览器写法：document.body.scrollTop

火狐、IE浏览器写法：document.documentElement.scrollTop

火狐、谷歌、IE9+浏览器写法：window.pageYoffset/window.pageXoffset

兼容性写法：

var scrollTop = window.pageYOffset ||document.documentElement.scrollTop||document.body.scrollTop||0;

var scrollLeft = window.pageXOffset||document.documentElement.scrollLeft||document.body.scrollLeft||0;

与client相关的兼容性问题：

ie9及以上的版本：window.innerWidth

标准模式（有DTD约束）： document.documentElement.clientWidth

怪异模式（无DTD约束）： document.body.clientWidth;

兼容性写法:

window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;

与event相关的兼容性问题：

event:火狐浏览器不支持

window.event:火狐浏览器不支持

在事件函数中传递参数方法：IE浏览器不支持

兼容性写法：window.οnclick=function(event){ var e=event||window.event; }

与oninput方法相关的兼容性问题:

oninput:谷歌支持

onpropertychang:IE支持

兼容性写法：元素. Oninput=元素. Onpropertychang=function(){};

获取元素属性兼容性问题：

window.getComputedStyle(获取属性的元素,伪元素)[属性];//普通浏览器支持

获取属性的元素.currentStyle[属性]；// ie678支持

兼容性写法：

(1)      window.getComputedStyle? window.getComputedStyle(获取属性的元素,null)[属性]: 获取属性的元素.currentStyle[属性]

(2)function getStyle(obj,attr){

         if(window.getComputedStyle){

                   returnwindow.getComputedStyle(obj,null)[attr]

         }else{

                   returnobj.currentStyle[attr];

         }

}

滚轮事件兼容性问题：

<script type="text/javascript">
    function scrollFunc(event,fn){ 
        var e=event || window.event;
        if(e.detail){//Firefox
            return e.detail; 
        } else if(e.wheelDelta){//IE/Opera/Chrome 
            return e.wheelDelta; 
        }
    } 


    if(document.addEventListener){ //火狐
         document.addEventListener('DOMMouseScroll',scrollFunc);
    }
    window.onmousewheel=function(){//谷歌
        alert(scrollFunc());
    }
    document.onmousewheel=function(){//IE
        alert(scrollFunc());
    }
</script>

背景图片兼容性问题：

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=bEnabled,sizingMethod=sSize,
src=sURL)；
属性剖析：
　　1、enabled: 可选项，布尔值(Boolean)类型参数。设置或检索滤镜是否激活。默认值为true，激活状态，false，滤镜禁止状态。
　　2、sizingMethod:可选项，字符串(String)类型参数。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。参数可选值有以下三种：
　　  （1）、crop:剪切图片以适应对象尺寸。 
　　  （2）、image:默认值。增大或减小对象的尺寸边界以适应图片的尺寸。 
　　  （3）、scale:缩放图片以适应对象的尺寸边界。 
　　3、src:必选项。字符串(String)。使用绝对或相对url地址指定背景图像。


在IE上使用缩放效果时，图片先缩小再放大问题解决：在图片放大之前设置固定的大小

透明度： 

filter:alpha(opacity=50)；