先说说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();
}
}
}
}
- 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等工具自动填充。
