瀏覽器內核及對應兼容性的處理問題

　眾所周知，目前市場上最火的五大瀏覽器是：google chrome、firefox（FF）、Internet Explorer（IE）、safari、opera。

　　

　他們相對應的內核是什么呢？

　　谷歌瀏覽器：Google Chrome，谷歌瀏覽器之前一直使用蘋果的webkit內核，但是現在它與蘋果內核分道揚鑣，自己開創了新的blink內核，這個內核也在被歐鵬（opera瀏覽器）共同采用和開發；

　　火狐瀏覽器：Mozilla Firefox ，內核是Gecko；

　　opera瀏覽器：內核是blink；

　　Safari瀏覽器：使用的是蘋果公司自己的內核webkit；

　　IE瀏覽器：微軟出品的瀏覽器，IE4以上版本都是Trident內核。由於壟斷性，IE在很長一段時間內沒有更新，導致兩個后果：一是IE與W3C標准脫節，二是Trident內核大量的bug問題沒得到及時解決。所以這就給了其他瀏覽器機會，比如firefox等。也正是這些原因，使Web前端開發人員大費周折，特別是IE6正處在新舊交替的關鍵地方（已經逐漸被舍棄）。

 

　　當然除了這五大瀏覽器之外，市場上還有很多，例如：

　　搜狗瀏覽器：兼容模式（IE：Trident）和高速模式（webkit）；

　　遨游瀏覽器：兼容模式（IE：Trident）和高速模式（webkit）；

　　QQ瀏覽器：普通模式（IE：Trident）和極速模式（webkit）；

　　360極速瀏覽器：基於谷歌（Chromium）和IE內核；

　　360安全瀏覽器：IE內核。

 

　當然，既然瀏覽器的內核不同，那么瀏覽器在解析代碼的時候就會有可能不一樣，因為他們所支持的方法有不同之處。

　在pc端，通用的方法有三種：分別是能力檢測、代理檢測和怪癖檢測。

　　1.能力檢測（常用）：通過獲取標簽的API，檢測他是否支持這個API，如果支持，那么就用，否則就換另一種API來達到效果，例如原生js中常用的innerText方法：

// 書寫innerText的兼容性代碼:
// 獲取標簽的innerText（兼容所有瀏覽器）
function getInnerText(element) {
    if (typeof element.innerText === "string") {
        return element.innerText;
    } else {
        return element.textContent;
    }
}

//設置標簽的innerText（兼容所有瀏覽器）
function setInnerText(element, value) {
    //能力檢測
    if (typeof element.innerText === "string") {
        element.innerText = value;
    } else {
        element.textContent = value;
    }
}

　　2.代理檢測：通過在瀏覽器中的控制台（console.log）中輸入navigator.userAgent，來獲得瀏覽器的相關信息。

　　3.怪癖檢測：由於有些瀏覽器有自己獨特的特征，通過檢測瀏覽器有無對應的特征，來分辨瀏覽器。

 

這些方法僅僅是本人在開發中遇到的方法，希望在開發過程中能與大家共同分享，可能還有其它方法，如果大牛們還有其他方法，還請留言，多多指教！