浏览器兼容es6新语法

浏览器兼容性问题的原因

浏览器的兼容性问题，是我们在前端开发过程中必须要考虑到的问题，目前市面上的浏览器种类很多，所以导致对我们的代码的解析会存在多多少少的差异，但是有时候我们又必须要使用存在差异的代码，此时就需要对代码进行兼容性处理。主流浏览器的内核基本大同小异，这里大致可分为四种：Webkit内核、Presto内核、Trident内核、Gecko内核。 下图为国内常见浏览器的内核对比：

常见的浏览器兼容性问题以及解决办法

问题1：不同浏览器的元素标签默认的内外边距不同
解决方法：在全局css中使用通配符处理 *{margin:0;padding:0;}

问题2：img标签默认有间距
解决方法：使img浮动

问题3：cursor属性的兼容性问题
解决方法：firefox不支持hand，但ie支持pointer，统一使用pointer

问题4：IE浏览器不识别 min- 标志
解决方法：将两者都写上，例如 width: 80px;height: 35px; min-width: 80px; min-height: 35px;

问题5：JS获取浏览器窗口大小的兼容性问题
解决方法：使用兼容性写法，例如：获取网页内容实际宽高的写法
var scroll_w = document.documentElement.scrollWidth || document.body.scrollWidth;
var scroll_h = document.documentElement.scrollHeight || document.body.scrollHeight;

问题6：event事件问题
解决方法：兼容性写法：document.onclick = function(ev){ var e = ev || window.event; //获取到event对象 }

问题7：JS 中innerText问题
解决方法：IE浏览器中使用textContent

问题8：JS中设置事件与移除事件的问题
解决方法：

function addEvent(obj,type,fn){//添加事件监听，参数分别为 对象、事件类型、事件处理机制（冒泡或捕获），默认为false
        if (obj.addEventListener) {
            obj.addEventListener(type,fn,false);//非IE
        } else{
            obj.attachEvent('on'+type,fn);//ie写法，注意要加上 on
        };
    }
    function removeEvent(obj,type,fn){//删除事件监听
        if (obj.removeEventListener) {
            obj.removeEventListener(type,fn,false);//非IE
        } else{
            obj.detachEvent('on'+type,fn);
        };
    }

问题9：JS中阻止默认事件和阻止事件传播的兼容性问题
解决方法：

//js阻止事件传播
    document.onclick=function(e){
        var e=e||window.event;  //获取事件对象的兼容性写法，上文提过
        if (e.stopPropagation) {
            e.stopPropagation();//非IE
        }else{
            e.cancelBubble=true;//IE写法
    	}
//js阻止默认事件
    document.onclick=function(e){
        var e=e||window.event;
        if (e.preventDefault) {
            e.preventDefault();//非IE
        }else{
            e.returnValue=false;//IE写法
    	}

问题10：JS中鼠标滚轮事件的兼容性问题
解决方法：

//火狐中的滚轮事件
    document.addEventListener("DOMMouseScroll",function(event){
        alert(event.detail);//若前滚的话为 -3，后滚的话为 +3
    },false)
    //非火狐中的滚轮事件
    document.onmousewheel=function(event){
        alert(event.detail);//前滚：+120，后滚：-120
    }