ie8 兼容 html5 ie浏览器兼容ie8

兼容0)
事件对象兼容:
在IE8及以下识别对象window.event;IE8以上识别e或者eve;
改善兼容方法:

var e=eve||event;(方向调换后要写成window.event||eve)

兼容1)
鼠标点击事件对象返回值不一:
IE8以上:
左键 ： 0
滚轮 ： 1
右键 : 2
IE8及以下:
左键 ：1
滚轮 ：4
右键 : 2
改善兼容方法:

function getButton(eve){
		if(eve){
			return eve.button;
		}else if(window.event){
			var button = window.event.button;
			switch(button){
				case 1 : 
					return 0;
				case 4 : 
					return 1;
				case 2 : 
					return 2;
			}
		}
	}

兼容2)
e.keyCode在火狐下的onkeypress事件下,所有的字符键返回的结果都是0;
用e.which可以改善,但是切换到IE8及以下,也出现返回结果不一致;
改善兼容方法:

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

兼容3)
获取鼠标在元素上操作时的偏移量时:低版本的火狐无法使用e.offsetX和e.offsetY,需要使用e.layerX和e.layerY;
改善兼容的方法:

var x=e.offsetX||e.layerX;
var y=e.offsetY||e.layerY;

兼容4)
事件流下的/冒泡(从子元素到父元素全部执行)阻止冒泡时IE8及以下返回结果是undefined;
改善兼容方法:

function stopPropaG(e){
		if(e.stopPropagation){
			//说明是现代浏览器
			e.stopPropagation();
		}else{
			//说明是ie8及以下浏览器
			e.cancelBubble = true;
		}
	}

兼容5)跨浏览器兼容IE8以下阻止默认行为
兼容写法:

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

兼容6)跨浏览器兼容IE8及以下的事件监听:
//此位置封装了一个函数addEvent;函数中传递了三个参数,元素,事件,回调函数,回调函数内执行的是事件监听

function addEvent(ele,eve,callBack){
		if(ele.addEventListener){
			ele.addEventListener(eve,callBack);
		}else{
			ele.attachEvent("on"+eve,callBack);
		}
	}

兼容7)事件委托在IE8及以下不兼容(显示undefined)

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

兼容8)拖拽时去掉文字内容默认选中兼容

window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();

兼容9)获取浏览器可视宽高
IE8以下不识别

window.innerWidth:获取浏览器可视区的宽度
window.innerHeight:获取浏览器可视区的高度
兼容性好的写法:
document.documentElement.clientWidth;//兼容性好
document.documentElement.clientHeight;//兼容性好

兼容10)获取页面垂直方向滚走的距离时
低版本的火狐,谷歌不识别:

document.doucumentElement.scrollTop;
兼容写法:
document.decumentElement.scrollTop || document.body.scrollTop(低版本谷歌和火狐兼容)

兼容11) 跨浏览器兼容ie8及以下获取元素计算后样式值。

function getStyle(obj,attr){
	return window.getComputedStyle ? window.getComputedStyle(obj,null)[attr] : obj.currentStyle[attr];
}

兼容12)兼容ie7的两像素问题。

function getRect(ele){
	var rect = ele.getBoundingClientRect();
	var a = document.documentElement.clientLeft;
	return {
		left :rect.left -a,
		right:rect.right -a,
		top:rect.top -a,
		bottom:rect.bottom -a
	}
}

兼容13)兼容ie8及以下缓存问题：
ie缓存：
每一交发送请求，如果请求路径没有发生任何改变，浏览器会认为与上一次请求是同一次请求。
上次请求在浏览器的缓存中保存了上次请求的记录，会在缓存中直接获取数据，而不会到接口中去获取数据。
如何解决缓存问题？
解决办法：让每一次请求与上一次请不同。

xhr.open("get","text.txt?rand="+Math.random());
	xhr.open("get","text.txt?rand=" + new Date().getTime());

兼容14)兼容ie6及以下定义参数问题：

var xhr=new XMLHttpRequest()在ie6 及以下无此对象；
兼容写法：
function getXHR(){
var xhr=null;
if(Window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = ActiveXObject("Microsoft.XMLHTTP");
	}
 return   xhr
}