如何機制地回答瀏覽器兼容性問題

前言

有過面試經驗的同窗應該都被問過瀏覽器兼容性的問題，對於面試官的問題，經常猝不及防，由於一般他們都是這麼問的。"來談談瀏覽器兼容的問題吧"，"你對瀏覽器的兼容性有了解過嗎"，那麼如何纔是咱們正確回答這個問題的姿式呢。

雖然面試官的問題十分的籠統，瀏覽器的兼容性無非仍是樣式兼容性（css），交互兼容性（javascript），瀏覽器 hack 三個方面。

樣式兼容性（css）方面

1. 由於歷史緣由，不一樣的瀏覽器樣式存在差別，能夠經過 Normalize.css 抹平差別，也能夠定製本身的 reset.css，例如經過通配符選擇器，全局重置樣式

   * { margin: 0; padding: 0; }

2. 在CSS3尚未成爲真正的標準時，瀏覽器廠商就開始支持這些屬性的使用了。CSS3樣式語法還存在波動時，瀏覽器廠商提供了針對瀏覽器的前綴，直到如今仍是有部分的屬性須要加上瀏覽器前綴。在開發過程當中咱們通常經過IDE開發插件、css 預處理器以及前端自動化構建工程幫咱們處理。

   瀏覽器內核與前綴的對應關係以下

   內核	主要表明的瀏覽器	前綴
   Trident	IE瀏覽器	-ms
   Gecko	Firefox	-moz
   Presto	Opera	-o
   Webkit	Chrome和Safari	-webkit

3. 在還原設計稿的時候咱們經常會須要用到透明屬性，因此解決 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）

1. 事件兼容的問題，咱們一般須要會封裝一個適配器的方法，過濾事件句柄綁定、移除、冒泡阻止以及默認事件行爲處理

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);
        }
    };

1. new Date()構造函數使用，'2018-07-05'是沒法被各個瀏覽器中，使用new Date(str)來正確生成日期對象的。 正確的用法是'2018/07/05'.
2. 獲取 scrollTop 經過 document.documentElement.scrollTop 兼容非chrome瀏覽器

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

瀏覽器 hack

1. 快速判斷 IE 瀏覽器版本

<!--[if IE 8]> ie8 <![endif]-->
    
    <!--[if IE 9]> 騷氣的 ie9 瀏覽器 <![endif]-->

1. 判斷是不是 Safari 瀏覽器

   / Safari /
   var isSafari = /a/.__proto__=='//';

2. 判斷是不是 Chrome 瀏覽器

   / Chrome /
   var isChrome = Boolean(window.chrome);

身段不能掉，咱們是個有逼格的前端

「什麼？大家公司要兼容IE6，咱們今天的面試就到這裏爲止吧，再見」。如今若是還有哪一個公司要兼容IE6的話就不要去了，開發起來得多不幸福。

擴展閱讀

如何處理CSS3屬性前綴_Autoprefixer

CSS透明opacity和IE各版本透明度濾鏡filter的最準確用法

往期文章

精讀《你不知道的 javascript（上卷）》

精讀《你不知道的javascript》中卷

精讀《深刻淺出Node.js》

javascript 垃圾回收算法

精讀《圖解HTTP》

思惟導圖下載地址