HTML常用的兼容语法

    在我们学习jHTML时，我们会遇见很多的兼容性问题，那么兼容性问题就是为我们使用的浏览器不同，各种浏览器对代码的解析是有所差异导致的代码在有些浏览器上无法正常运行，作为一名程序员，我们从用户的体验考虑，而且我们当然希望我们的代码在任何一个浏览器中都能正常运行，那么我就总结了一些css页面渲染和js原生语法中一些常见的几种兼容性写法。
    一、Css中兼容写法：
    1-1、透明度写法

1.opacity:0~1;IE8以上的浏览器``
2.filter:alpha(opacity=1~100);    

 1-2、 IE9及IE9以下的浏览器万能清除浮动法

.clear:after{content:'';display:block;clear:both;height:0;overflow:hidden;visibility:hidden;}
	.clear{zoom:1;}
	//（为了兼容 IE6，7 同样需要配合zoom使用）

1-3、设置手型鼠标：

Cursor：pointer；
//E6.0以上版本及其它内核浏览器都识别该声明。
Cursor：hand；
//IE浏览器识别，其它浏览器不识别该声明

二、Js中常见的兼容写法：
2-1、获取非行内样式

 if(window.getComputedStyle){
    // 这个方法是非IE浏览器支持
    console.log(window.getComputedStyle(oDiv).width);
}else{
    // 兼容IE的方法
    console.log(oDiv.currentStyle.width);    
}

2-2、阻止事件冒泡（阻止事件传播）
从事件源阻止

 //写法一：if...else判断语句
function stopBubble(e){
    if(e.stopPropagation){
        e.stopPropagation();
    }else{
//IE兼容写法
      e.cancelBubble = true;
    }
}
//写法二：使用三元运算符
e.stopPropagation?e.stopPropagation():e.cancelBubble = true

2-3、阻止浏览器默认行为

//写法一：if...else判断语句
if (e.preventDefault) {
    e.preventDefault();
} else {
    e.returnValue = false;
}
//写法二：使用三元运算符
e.preventDefault？e.preventDefault()：e.returnValue = false;

//写法三：
return false；（阻止一切行为，需要写在最后一句）

2-4、滚动条

var height = document.documentElement.scrollTop || document.body.scrollTop;

2-5、键盘检测兼容性写法

document.onkeypress = function(evt){
var e = evt || event;
//key为兼容的ASCII值
var key = e.keyCode || e.which || e.charCode;
console.log(e.ctrlKey);
console.log(key);
}
比如说点击回车键
	document.onkeypress = function(evt){
		var e = evt || event;
		//点击了回车按键，发送内容
            alert("send");
       }	
}

2-6、获取事件对象

标签对象.事件类型 = function(e){
  e = e || window.event
}

2-7、事件监听

function myAddEvent( ele , type , fun){
    // 判断 addEventListener这个方法是否存在
    if(ele.addEventListener){
        ele.addEventListener(type , fun);
    }else{
        ele.attachEvent('on'+type , fun);
    }
}

2-8、删除事件处理

function delFun(ele , type , fun){
    if(ele.removeEventListener){
        ele.removeEventListener(type , fun);
    }else{
        ele.detachEvent( 'on' + type , fun);
    }
}

2-9、事件委托
（获取真实事件源）

e.target || e.srcElement;

2-10、建立ajax对象

let xhr = {};
if(XMLHttpRequest){
    xhr = new XMLHttpRequest();
}else{
    xhr = new ActiveXObject('Microsoft.XMLHTTP');
}

2-11、获取ajax响应体
标准浏览器：

xhr.onload = function(){}

兼容浏览器：

xhr.onreadystatechange = function(){}