浏览器兼容性

1.event事件对象兼容
    event=event||window.event
2.event.x与event.y问题
    问题说明:IE下,even对象有x、y属性,但是没有pageX、pageY属性;
            Firefox下,even对象有pageX、pageY属性,但是没有x、y属性。
    解决方法:var myX = event.x ? event.x : event.pageX;
            var myY = event.y ? event.y:event.pageY;
    如果考虑第8条问题,就改用myEvent代替event即可。

3.盒模型
    盒模型包括:content,padding,border,margin
    ie下为怪异盒模型,他的宽度获取为content+padding+border
    普通浏览器的width获取值为content内容区的宽度
    可以使用box-sizing
        有两个值一个是content-box,另一个是border-box。
        当设置为box-sizing:content-box时,将采用标准模式解析计算,也是默认模式;
        当设置为box-sizing:border-box时,将采用怪异模式解析计算;
        目前使用此属性需要前缀如下:
            -webkit-box-sizing: content-box;
            -moz-box-sizing: content-box;

4.input属性placeholder
    IE8下不支持HTML5属性placeholder,可以使用插件进行解决

5.setAttribute('style','color:red;')
    FIREFOX支持(除了IE,现在所有浏览器都支持),IE不支持
    解决办法:不用setAttribute('style','color:red')
        而用object.style.cssText = ‘color:red;'(这写法也有例外)
        最好的办法是上面种方法都用上,万无一失        

6.监听事件
    addEventListener支持除了ie的所有浏览器
    attachEvent支持ie的监听事件,但是他的事件必须加上on

7.移除事件
        ie浏览器中datachEvent进行移除事件
        其他浏览器中使用removeEventListener进行移除事件

8.取消冒泡
    取消冒泡
        IE浏览器中使用cancelBuble=true来取消冒泡
        普通浏览器中使用stopPropagation来禁止冒泡

9.禁止默认行为
    IE浏览器中使用returnValue='false'来禁止默认行为
    普通浏览中使用preventDefault()来禁止默认行为

    document.onclick=function(e){
        var e=e||window.event;
        if (e.preventDefault) {
          e.preventDefault();//W3C标准
        }else{
          e.returnValue='false';//IE..
        }
    }

10.关于EVENT事件中的target:
    //关于event事件中的target

        document.onmouseover=function(e){
            var e=e||window.event;
            var Target=e.target||e.srcElement;//获取target的兼容写法,后面的为IE
            var from=e.relatedTarget||e.formElement;//鼠标来的地方,同样后面的为IE...
            var to=e.relatedTarget||e.toElement;//鼠标去的地方
        }
11.鼠标滚轮滚动事件:
        //鼠标滚轮事件
        //火狐中的滚轮事件
        document.addEventListener("DOMMouseScroll",function(event){
            alert(event.detail);//若前滚的话为 -3,后滚的话为 3
        },false)
        //非火狐中的滚轮事件
        document.onmousewheel=function(event){
            alert(event.detail);//前滚:120,后滚:-120
        }
12.ajax对象
        IE浏览器中使用ActiveXObject创建ajax对象
        普通浏览器中使用XmlHttprequest创建ajax对象
-------------本文结束感谢您的阅读-------------
来而不往,非礼也!
分享到: 更多