web开发中的各种浏览器的兼容问题

最近在学js开发,发现很多浏览器兼容问题有不同的写法,记录一下.

1.css3中的新标签

比如border-radius,box-shadow

要写成多浏览器兼容

border-radius:5px;

-moz-border-radius:5px;

-webkit-border-radius:5px;

2.判断是不是IE浏览器

var isIE = navigator.userAgent.indexOf("MISE") > -1; //无法判断IE11

3.帮定事件的方法

传统方法:element.onclick = function(e){...}

w3c标准方法:element.addEventListener("click",function(event){...})

IE事件注册方法:element.attachEvent("onclick",function(){...})

所以可以统一为:

function addEvent(element, event, callbackFunction){

if(element.addEventListener){

element.addEventListener(event, callbackFunction,false);

}else if (element.attachEvent){

element.attachEvent('on'+event,callbackFunction);

}

}

4.跨浏览器获取事件的方法

addEvent(demo,"mouseover",function(e){

var event = e || window.event;//IE浏览器用window.event获取

var target = event.target || event.srcElement; //获取事件触发的目标

if (target.className == "...") // 判断事件触发的目标,是不是相应的类名

});