兼容性问题

先说说JS。
听B乎上的大神讲，之所以IE的兼容性这么辣鸡，是因为别的厂商故意绕开微软的实现。。。。比如（这些东西看看就好，现在大多数web不支持IE9以下了）：

IE不支持DOM ready

解决方案

function myReady(fn){

    //对于现代浏览器，对DOMContentLoaded事件的处理采用标准的事件绑定方式
    if ( document.addEventListener ) {
        document.addEventListener("DOMContentLoaded", fn, false);
    } else {
        IEContentLoaded(fn);
    }

    //IE模拟DOMContentLoaded
    function IEContentLoaded (fn) {
        var d = window.document;
        var done = false;

        //只执行一次用户的回调函数init()
        var init = function () {
            if (!done) {
                done = true;
                fn();
            }
        };

        (function () {
            try {
                // DOM树未创建完之前调用doScroll会抛出错误
                d.documentElement.doScroll('left');
            } catch (e) {
                //延迟再试一次~
                setTimeout(arguments.callee, 50);
                return;
            }
            // 没有错误就表示DOM树创建完毕，然后立马执行用户回调
            init();
        })();

        //监听document的加载状态
        d.onreadystatechange = function() {
            // 如果用户是在domReady之后绑定的函数，就立马执行
            if (d.readyState == 'complete') {
                d.onreadystatechange = null;
                init();
            }
        }
    }
}

2. IE 不支持2级DOM事件，有他自己的方法。

var eventUtil={
            // 添加句柄
            addHandler:function(element,type,handler){
               if(element.addEventListener){
                 element.addEventListener(type,handler,false);
               }else if(element.attachEvent){
                 element.attachEvent('on'+type,handler);
               }else{
                 element['on'+type]=handler;
               }
            },
            // 删除句柄
            removeHandler:function(element,type,handler){
               if(element.removeEventListener){
                 element.removeEventListener(type,handler,false);
               }else if(element.detachEvent){
                 element.detachEvent('on'+type,handler);
               }else{
                 element['on'+type]=null;
               }
            },
          //获取事件
          getEvent:function(event){
            return event?event:window.event;
          },
          //得到事件类型
          getType:function(event){
            return event.type;
          },
          //得到节点类型
          getElement:function(event){
            return event.target || event.srcElement;
          },
          //停止事件动作
          preventDefault:function(event){
            if(event.preventDefault){
              event.preventDefault();
            }else{
              event.returnValue=false;
            }
          },
          //停止冒泡
         stopPropagation:function(event){
           if(event.stopPropagation){
             event.stopPropagation();
           }else{
             event.cancelBubble=true;
           }
         }
  }

所以啊，JQ的出现，真的是解放了生产力。JQ的一小步， WEB的一大步。后来的后来，微软后出的Edge,反过来兼容chrome们，这真的是极好的。JS babel的出现，可以把最新的JS标准（ES6）转为上一代（ES5），就可以很方便的使用class,promise等一堆东西。

还有一个不算坑的东西CSS。
不管是不是MS，CSS3在老家伙上，照样不行。这个CSS3带来了很多好东西，什么FLEX布局，很多实用的选择器。但是吧，要告别这别老的浏览器，只能用时间去解决。

由于每一家的实现不一样，各种前缀满天飞，什么--chrom,什么--firefox,什么--opera，好消息是可以用less,sass等工具自动填充。