前言
有過面試經驗的同學應該都被問過瀏覽器相容性的問題，對於面試官的問題，常常猝不及防，因為通常他們都是這麼問的。"來談談瀏覽器相容的問題吧"，"你對瀏覽器的相容性有了解過嗎"，那麼如何才是我們正確回答這個問題的姿勢呢。
雖然面試官的問題十分的籠統，瀏覽器的相容性無非還是樣式相容性（css），互動相容性（javascript），瀏覽器 hack 三個方面。
樣式相容性（css）方面
-
因為歷史原因，不同的瀏覽器樣式存在差異，可以通過 Normalize.css 抹平差異，也可以定製自己的 reset.css，例如通過萬用字元選擇器，全域性重置樣式
* { margin: 0; padding: 0; } 複製程式碼 -
在CSS3還沒有成為真正的標準時，瀏覽器廠商就開始支援這些屬性的使用了。CSS3樣式語法還存在波動時，瀏覽器廠商提供了針對瀏覽器的字首，直到現在還是有部分的屬性需要加上瀏覽器字首。在開發過程中我們一般通過IDE開發外掛、css 前處理器以及前端自動化構建工程幫我們處理。
瀏覽器核心與字首的對應關係如下
核心 主要代表的瀏覽器 字首 Trident IE瀏覽器 -ms Gecko Firefox -moz Presto Opera -o Webkit Chrome和Safari -webkit -
在還原設計稿的時候我們常常會需要用到透明屬性，所以解決 IE9 以下瀏覽器不能使用 opacit。
opacity: 0.5; filter: alpha(opacity = 50); //IE6-IE8我們習慣使用filter濾鏡屬性來進行實現 filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50); //IE4-IE9都支援濾鏡寫法progid:DXImageTransform.Microsoft.Alpha(Opacity=xx) 複製程式碼
互動相容性（javascript）
-
事件相容的問題，我們通常需要會封裝一個介面卡的方法，過濾事件控制程式碼繫結、移除、冒泡阻止以及預設事件行為處理
var helper = {} //繫結事件 helper.on = function(target, type, handler) { if(target.addEventListener) { target.addEventListener(type, handler, false); } else { target.attachEvent("on" + type, function(event) { return handler.call(target, event); }, false); } }; //取消事件監聽 helper.remove = function(target, type, handler) { if(target.removeEventListener) { target.removeEventListener(type, handler); } else { target.detachEvent("on" + type, function(event) { return handler.call(target, event); }, true); } }; 複製程式碼 -
new Date()建構函式使用，'2018-07-05'是無法被各個瀏覽器中，使用new Date(str)來正確生成日期物件的。 正確的用法是'2018/07/05'.
-
獲取 scrollTop 通過 document.documentElement.scrollTop 相容非chrome瀏覽器
var scrollTop = document.documentElement.scrollTop||document.body.scrollTop; 複製程式碼
瀏覽器 hack
-
快速判斷 IE 瀏覽器版本
<!--[if IE 8]> ie8 <![endif]--> <!--[if IE 9]> 騷氣的 ie9 瀏覽器 <![endif]--> 複製程式碼 -
判斷是否是 Safari 瀏覽器
/* Safari */ var isSafari = /a/.__proto__=='//'; 複製程式碼 -
判斷是否是 Chrome 瀏覽器
/* Chrome */ var isChrome = Boolean(window.chrome); 複製程式碼
身段不能掉，我們是個有逼格的前端
“什麼？你們公司要相容IE6，我們今天的面試就到這裡為止吧，告辭”。
擴充套件閱讀
CSS透明opacity和IE各版本透明度濾鏡filter的最準確用法