浏览器兼容

菜鸟一枚，如有错误，欢迎指正。

样式兼容（ 忽略IE6及以下版本 ）

图片边框

描述：当图片在<a></a>内，在IE会出现边框

hack:给img加border:0

图片间隙

描述：当div插入图片，图片会把div下方撑大3像素

hack1:给img加display:block;或者vertical-align:middle；或者给父元素添加font-size:0

表单元素行高对其不一致

hack:给元素添加float:left

按钮默认大小不一样

hack:给按钮写统一的样式

透明属性

IE:filter:alpha(opacity=value)取值1~100整数

其他：opacity:value取值0~1

鼠标指针

cursor:pointer

事件兼容

事件对象的兼容方式

document.onclick=function(eve){

var e=eve || event;//兼容IE8及以下，或者var e = eve || window.event;

}

鼠标事件对象的坐标属性在火狐中的兼容

e.layerX,e.layerY

e.offsetX,e.offserY

兼容火狐在onkeypress事件下的keyCode值

var code = e.keyCode || e.which || e.charCode;

阻止冒泡的兼容写法：

e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;

阻止事件默认行为

e.preventDefault ? e.preventDefault() : e.returnValue = false;

自定义函数兼容IE事件监听

function addEvent(ele,eve,fn){

if(ele.addEventListener){

ele.addEventListener(eve,fn);

}else{

    //IE

ele.attachEvent("on"+eve,fn);

}

}

创建XMLHttpRequest对象

function getXhr(){

var xhr = null;

if(window.XMLHttpRequest){

xhr = new XMLHttpRequest();

}else{//IE6及以下

xhr = new ActiveXObject("Microsot.XMLHTTP");

}

return xhr;

}

事件委托兼容IE8及以下写法：

var target=e.target || e.srcElement;

跨IE8以下浏览器通过className获取元素集合

注：IE8及以下不识别document.getElementsByClassName("类名")

function getByClassName(className){//

var elementArr = [];

var ele = document.getElementsByTagName("*");//获取所有元素标签

for (var i = 0; i < ele.length; i++) {

if(ele[i].className == className){

elementArr.push(ele[i]);

}

}

return elementArr;

}

鼠标事件对象button属性的兼容

function getEventButton(eve){

//var b = eve.button;

if(eve){

//现代浏览器

return eve.button;

}else{//ie8及以下浏览器环境

var b = window.event.button;

switch(b){

case 1:

return 0;

case 4:

return 1;

case 2:

return 2;

}

}

}