浅谈前端兼容问题

1、为什么会出现兼容问题

在各大浏览器厂商的发展过程中，他们其实对web的标准都有不同的实现，因为实现的标准的不同，所以会有兼容性的产生。通俗的说，就是对于web标准，有些浏览器支持，有些浏览器不支持。

2、从历史角度看兼容

早期IE是在浏览器的世界中，占据主导地位。所以它自身实现了很多不同于标准浏览器的东西，有css的，也有js的：

Js方面：
1、滚动事件的兼容：

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

这个是针对早期的IE和谷歌

2、事件对象的兼容：

e = evt||window.event

3、阻止冒泡的兼容：

if(e.stopPropagation){
    e.stopPropagation();
}else{
    e.cancelBubble=true;
}

4、阻止默认行为的兼容:

if(e.preventDefault){
    e.preventDefault();
}else{
   e. returnValue = false;
}

5、关于鼠标按键编码的兼容

function but(evt){
    var e = evt || window.event; 
    if(evt){
        return e.button;
    } else if (window.event){
        switch(e.button){
            case 1: return 0;
            case 4: return 1;
            case 2: return 2;
        }
    }  
}

6、添加事件监听器的兼容

if(target.addEventListener){
    target.addEventListener("click",fun,false);
}else{
    target.attachEvent("onclick",fun);
}

7、解除事件监听器的兼容

if(target.removeEventLisener){
    target . removeEventListener(“click” , fun , false); 
}else{
    target . detachEvent(“onclick”, fun);
}

8、ajax创建对象的兼容

var xhr = null；
if(window.XMLHttpRequest){
    xhr = new XMLHttpRequest();
}else{
    xhr = new ActiveXObject("Microsoft XMLHTTP");
}

9、关于选取样式的属性的兼容

function getStyle(obj,attr){
    if(obj.currentStyle){
       return obj.currentStyle[attr];
    }else{
        return getComputedStyle(obj,false)[attr];
    }
}

10、关于日期里的getYear()方法，在ie里是2016，而在火狐中是116；
解决方法：统一使用getFullYear()方法；

11、关于获取自定义属性：
在ie8及以下可以通过常规方式获取自定义属性，但是标准浏览器是不支持的；
解决方法：统一使用getAttribute()来获取

12、关于获取className的问题：
getAttribute(“class”); //IE7及以下版本不支持该方法，并且在浏览器中的返回值为null，其他浏览器支持该方法；
getAttribute(“className”); // IE7及以下版本支持该方法，其他浏览器不支持
obj.getAttribute(“clase”)==null?obj.getAttribute(“className”):obj.getAttribute(“class”);

css方面：
1、低版本IE浏览器肯定不支持flex布局。

2、低版本的IE不支持CSS3特性。

3、在css方面，低版本的IE也有很多的css hark技术。

比如：图片的3像素bug、行高不一致、border、默认高度等等。

从不同的平台看兼容问题

一直以来、浏览器慢慢分化为pc端和移动端，pc端浏览器的发展慢，移动端的浏览器发展快。

所以会有这样的一条结论：移动端对基本的东西，支持的够完善，所以我们肯定不需要考虑移动端能不能用flex布局的问题。移动端需不需要支持数组的filter方法的问题。

CSS3本身有兼容

css3在低版本浏览器肯定做不到兼容的，可能有时候我们需要使用它的时候，会有一个策略——优雅降级。

优雅降级的意思，就是我们可能无法用比较标准的方式实现某种特效，但是我们可以使用一种稍差的方式，实现更好的兼容性。

CSS3本身针对火狐、谷歌等不同浏览器有自身的前缀，提高兼容性。

ES6、ES7本身具有兼容问题

现在的浏览器，对ES6有很大程度上的支持，但是支持的程度还不完全，所以会有babel这样的解析器，把ES6语法转化为标准的ES7语法。