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

Rindia 發布于2019-08-30 15:54 / 2392人閱讀

摘要：前言有過面試經驗的同學應該都被問過瀏覽器兼容性的問題，對于面試官的問題，常常猝不及防，因為通常他們都是這么問的。來談談瀏覽器兼容的問題吧，你對瀏覽器的兼容性有了解過嗎，那么如何才是我們正確回答這個問題的姿勢呢。

前言

有過面試經驗的同學應該都被問過瀏覽器兼容性的問題，對于面試官的問題，常常猝不及防，因為通常他們都是這么問的。"來談談瀏覽器兼容的問題吧"，"你對瀏覽器的兼容性有了解過嗎"，那么如何才是我們正確回答這個問題的姿勢呢。

雖然面試官的問題十分的籠統，瀏覽器的兼容性無非還是樣式兼容性（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 瀏覽器版本

判斷是否是 Safari 瀏覽器

/ Safari /
var isSafari = /a/.__proto__=="http://";

判斷是否是 Chrome 瀏覽器

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

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

“什么？你們公司要兼容IE6，我們今天的面試就到這里為止吧，再見”。現在如果還有哪個公司要兼容IE6的話就不要去了，開發起來得多不幸福。

擴展閱讀

如何處理CSS3屬性前綴_Autoprefixer

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

往期文章

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

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

精讀《深入淺出Node.js》

javascript 垃圾回收算法

精讀《圖解HTTP》

思維導圖下載地址

云服務器 GPU云服務器 webrtc如何做到兼容瀏覽器回答問題html 如何解決兼容問題?Win11僅支持1個I js面試閉包如何回答

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/116815.html

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

摘要：前言有過面試經驗的同學應該都被問過瀏覽器兼容性的問題，對于面試官的問題，常常猝不及防，因為通常他們都是這么問的。來談談瀏覽器兼容的問題吧，你對瀏覽器的兼容性有了解過嗎，那么如何才是我們正確回答這個問題的姿勢呢。前言有過面試經驗的同學應該都被問過瀏覽器兼容性的問題，對于面試官的問題，常常猝不及防，因為通常他們都是這么問的。來談談瀏覽器兼容的問題吧，你對瀏覽器的兼容性有了解過嗎，那么如...

leanote 2019-08-22 18:31 評論0 收藏0
拒信收割機の前端面經（CVTE，唯品會，百度）

摘要：另外回答的時候要淡定，一些問題就算不懂也不能慌，要和面試官談笑風生，然后盡量扯回到自己懂的東西上面大公司比如百度給我的感覺就是很重視基礎思維和潛力。 —— 雖然我的offer少，但是我的拒信多啊這幾天終于閑下來，做一點微小的工作，整理了一些之前幾家公司的前端面試題和個人經驗，想做前端的師弟妹可以參考，也歡迎各同行大神來指教~ （以下問題不分先后，時間久遠難免有些遺漏；很多問題面試官都...

yzd 2019-08-29 11:23 評論0 收藏0
拒信收割機の前端面經（CVTE，唯品會，百度）

摘要：另外回答的時候要淡定，一些問題就算不懂也不能慌，要和面試官談笑風生，然后盡量扯回到自己懂的東西上面大公司比如百度給我的感覺就是很重視基礎思維和潛力。 —— 雖然我的offer少，但是我的拒信多啊這幾天終于閑下來，做一點微小的工作，整理了一些之前幾家公司的前端面試題和個人經驗，想做前端的師弟妹可以參考，也歡迎各同行大神來指教~ （以下問題不分先后，時間久遠難免有些遺漏；很多問題面試官都...

channg 2019-08-20 11:22 評論0 收藏0
拒信收割機の前端面經（CVTE，唯品會，百度）

摘要：另外回答的時候要淡定，一些問題就算不懂也不能慌，要和面試官談笑風生，然后盡量扯回到自己懂的東西上面大公司比如百度給我的感覺就是很重視基礎思維和潛力。 —— 雖然我的offer少，但是我的拒信多啊這幾天終于閑下來，做一點微小的工作，整理了一些之前幾家公司的前端面試題和個人經驗，想做前端的師弟妹可以參考，也歡迎各同行大神來指教~ （以下問題不分先后，時間久遠難免有些遺漏；很多問題面試官都...

BlackHole1 2019-08-01 15:46 評論0 收藏0