先說說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等工具自動填充。
