Talking about front-end compatibility issues

1. Why is there a compatibility problem?

In the development process of major browser manufacturers, they actually have different implementations of web standards. Because of the different standards implemented, there will be compatibility. In layman's terms, some browsers support web standards and some browsers do not.

2. Compatibility from a historical perspective

In the early days, IE dominated the browser world. So it implements many things that are different from standard browsers, including css and js:

Js aspects:
1. Compatibility of scroll events:

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

This is for early IE and Google

2. Compatibility of event objects:

e = evt||window.event

3. Compatibility to prevent bubbling:

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

4. Prevent compatibility of default behavior:

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

5. Compatibility with mouse button coding

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. Compatible with adding event listeners

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

7. Remove the compatibility of event listeners

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

8. Compatibility of ajax-created objects

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

9. About the compatibility of the attributes of the selected style

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

10. Regarding the getYear() method in the date, it is 2016 in ie, but 116 in Firefox;
solution: use the getFullYear() method uniformly;

11. About obtaining custom attributes:
In ie8 and below, you can obtain custom attributes in a conventional way, but standard browsers do not support it;
solution: use getAttribute() uniformly to obtain

12. About getting className:
getAttribute("class"); //IE7 and below do not support this method, and the return value in browsers is null, other browsers support this method;
getAttribute("className") ; // IE7 and below support this method, other browsers do not support
obj.getAttribute("clase")==null?obj.getAttribute("className"):obj.getAttribute("class");

CSS aspects:
1. The lower version of IE browser definitely does not support flex layout.

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

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

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

从不同的平台看兼容问题

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

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

CSS3本身有兼容

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

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

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

ES6、ES7本身具有兼容问题

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