摘要：一什么是瀏覽器兼容問題所謂的瀏覽器兼容性問題，是指因為不同的瀏覽器對同一段代碼有不同的解析，造成頁面顯示效果不統(tǒng)一的情況。條件注釋最初于微軟的瀏覽器中出現(xiàn)，并且直至均支持。

所謂的瀏覽器兼容性問題，是指因為不同的瀏覽器對同一段代碼有不同的解析，造成頁面顯示效果不統(tǒng)一的情況。在大多數(shù)情況下，我們的需求是，無論用戶用什么瀏覽器來查看我們的網(wǎng)站或者登陸我們的系統(tǒng)，都應(yīng)該是統(tǒng)一的顯示效果。所以瀏覽器的兼容性問題是我們web前端開發(fā)人員經(jīng)常會碰到和必須要解決的問題.

概括的來說，瀏覽器兼容指的是同一份代碼在不同的瀏覽器顯示效果是不同的。
瀏覽器的兼容性大體分為樣式兼容性（css），交互兼容性（javascript），瀏覽器 hack 三個方面。

一些概念：

Css樣式在各瀏覽器中解析不一致的情況，或者說Css樣式在瀏覽器中不能正確顯示的問題稱為CSS Bug

CSS中，hack是指一種兼容css在不同瀏覽器中正確顯示的技巧方法，因為他們都屬于個人對css代碼的非官方的修改，或非官方的補(bǔ)丁。有些人更喜歡使用patch（補(bǔ)丁）來描述這種行為。

它是一種對特定的瀏覽器或瀏覽器組顯示或隱藏規(guī)則或聲明的方法。本質(zhì)上講，filter是一種用來過濾不同瀏覽器的hack類型。

那么，

不同的原因是什么？(不支持的屬性? bug？)

如何讓它展示正常?(條件注釋？ 多帶帶Hack？)

首先，讓我們簡單了解一下，三種兼容性的不同：

1.因為歷史原因，不同的瀏覽器樣式存在差異，可以通過 Normalize.css 抹平差異，也可以定制自己的 reset.css，例如通過通配符選擇器，全局重置樣式

  { margin: 0; padding: 0; }

2.在CSS3還沒有成為真正的標(biāo)準(zhǔn)時，瀏覽器廠商就開始支持這些屬性的使用了。CSS3樣式語法還存在波動時，瀏覽器廠商提供了針對瀏覽器的前綴，直到現(xiàn)在還是有部分的屬性需要加上瀏覽器前綴。在開發(fā)過程中我們一般通過IDE開發(fā)插件、css 預(yù)處理器以及前端自動化構(gòu)建工程幫我們處理。

瀏覽器內(nèi)核與前綴的對應(yīng)關(guān)系如下

3.在還原設(shè)計稿的時候我們常常會需要用到透明屬性，所以解決 IE9 以下瀏覽器不能使用 opacit。

 opacity: 0.5;
 filter: alpha(opacity = 50); //IE6-IE8我們習(xí)慣使用filter濾鏡屬性來進(jìn)行實現(xiàn)
 filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50); //IE4-IE9都支持濾鏡寫法progid:DXImageTransform.Microsoft.Alpha(Opacity=xx)

1.事件兼容的問題，我們通常需要會封裝一個適配器的方法，過濾事件句柄綁定、移除、冒泡阻止以及默認(rèn)事件行為處理

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

 //取消事件監(jiān)聽
 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);
     }
 };

2.new Date()構(gòu)造函數(shù)使用，"2018-07-05"是無法被各個瀏覽器中，使用new Date(str)來正確生成日期對象的。 正確的用法是"2018/07/05".

3.獲取 scrollTop 通過 document.documentElement.scrollTop 兼容非chrome瀏覽器

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

解決瀏覽器兼容的主要方法是css hack 那么到底什么是css hack呢？

由于不同廠商的流覽器或某瀏覽器的不同版本（如IE6-IE11,Firefox/Safari/Opera/Chrome等），對CSS的支持、解析不一樣，導(dǎo)致在不同瀏覽器的環(huán)境中呈現(xiàn)出不一致的頁面展現(xiàn)效果。這時，我們?yōu)榱双@得統(tǒng)一的頁面效果，就需要針對不同的瀏覽器或不同版本寫特定的CSS樣式，我們把這個針對不同的瀏覽器/不同版本寫相應(yīng)的CSS code的過程，叫做CSS hack!

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

2.判斷是否是 Safari 瀏覽器

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

3.判斷是否是 Chrome 瀏覽器

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

同一產(chǎn)品，版本越老， bug 越多

同一產(chǎn)品，版本越新，功能越多

不同產(chǎn)品，不同標(biāo)準(zhǔn)，不同實現(xiàn)方式

瀏覽器市場份額

常查CSS屬性是否兼容時

常查 Hack 的寫法

1、要不要做產(chǎn)品的角度（產(chǎn)品的受眾、受眾的瀏覽器比例、效果優(yōu)先還是基本功能優(yōu)先）成本的角度 (有無必要做某件事)

2、做到什么程度讓哪些瀏覽器支持哪些效果

3、如何做根據(jù)兼容需求選擇技術(shù)框架/庫(jquery的版本)根據(jù)兼容需求選擇兼容工具（htmlshiv.js、respond.js、css reset、normalize.css、modernizr）postcss

4、漸進(jìn)增強(qiáng)和優(yōu)雅降級漸進(jìn)增強(qiáng)(progressive enhancement):
針對低版本瀏覽器進(jìn)行構(gòu)建頁面，保證最基本的功能，然后再針對高級瀏覽器進(jìn)行效果、交互等改進(jìn)和追加功能達(dá)到更好的用戶體驗優(yōu)雅降級 (graceful degradation): 一開始就構(gòu)建完整的功能，然后再針對低版本瀏覽器進(jìn)行兼容。

1、合適的框架Bootstrap (>=ie8)；jQuery 1.~ (>=ie6), jQuery 2.~ (>=ie9)；Vue (>= ie9)...

2、條件注釋

即IE條件注釋是于HTML源碼中被IE有條件解釋的語句。條件注釋可被用來向IE提供及隱藏代碼。條件注釋 (conditional comment) 是于 HTML 源碼中被IE有條件解釋的語句。條件注釋可被用來向 IE 提供及隱藏代碼。條件注釋最初于微軟的 Internet Explorer 5 瀏覽器中出現(xiàn)，并且直至 Internet Explorer 9 均支持。微軟已宣布于 IE10 停止支持。

if（如果是）非IE瀏覽器，else（那么）我的頁面上該 標(biāo)簽會生效，
彈出一個1；如果在IE瀏覽器上，這段本身是有效的，即能控制該效果，所以在其他瀏覽器這段則會被注釋掉。

*3、CSS hack
（1）定義：由于不同廠商的瀏覽器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一廠商的瀏覽器的不同版本，如IE6和IE7，對CSS的解析認(rèn)識不完全一樣，因此會導(dǎo)致生成的頁面效果不一樣，得不到我們所需要的頁面效果。

這個時候我們就需要針對不同的瀏覽器去寫不同的CSS，讓它能在不同的瀏覽器中也能得到我們想要的頁面效果。

（2）常見hack寫法利用該方法去檢測瀏覽器兼容問題

.box{
  color: red;
  _color: blue; /*針對后期檢查將ie6和其他瀏覽器區(qū)別開來的標(biāo)準(zhǔn)*/
  *color: pink; /*同上，ie6、7*/
  color: yellow9;  /*ie/edge 6-8*/
}

以上屬性均是采用樣式覆蓋形式，去相應(yīng)地在所在瀏覽器屬性生效

（3）常見兼容處理范例

例子A：

.target{
  display: inline-block;
  *display: inline;/*在IE6、7中會生效，產(chǎn)生類似bfc的效果，可添加寬高，
與其他瀏覽器所使用的display: inline-block;有相同效果*/
  *zoom: 1;
}

例子B：

.clearfix:after{
  content: "";
  display: block;
  clear: both;
}
.clearfix{
  *zoom: 1; /* 僅對ie67有效 */
}

例子C：

.clearfix:after{
  content: "";
  display: block;
  clear: both;
}
.clearfix{
  *zoom: 1; /* 僅對ie67有效 */
}

例子D：

例子E：

]-->

（4）常見屬性的兼容情況：多使用 https://caniuse.com/

inline-block: >=ie8

inline-block: >=ie8

inline-block: >=ie8

inline-block: >=ie8

inline-block: >=ie8

inline-block: >=ie8

圓角: >= ie9

圓角: >= ie9

圓角: >= ie9

常見的瀏覽器兼容性可分為三類：

HTML兼容

CSS兼容

JavaScript兼容

viewport

.el {
  -webkit-user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
   user-select: none;
}

@media only screen  and (min-device-width : 320px)  and (max-device-width : 375px){}

方法：可以用html5的oninput事件去代替keyup

input,textarea {
  border: 0;
  -webkit-appearance: none;
}

input:-ms-clear{display:none;}

flex布局對于低版本的安卓，不支持flex-wrap:wrap屬性，但是ios系統(tǒng)支持換行屬性，這個時候如何解決呢？當(dāng)然是不使用換行，用其他方式代替。

.box{
    display: -webkit-box; 
    /* 老版本語法: Safari, iOS, Android browser, older WebKit browsers. */
    display: -moz-box; /* 老版本語法: Firefox (buggy) */
    display: -ms-flexbox; /* 混合版本語法: IE 10 */
    display: -webkit-flex; /* 新版本語法: Chrome 21+ */
    display: flex; /* 新版本語法: Opera 12.1, Firefox 22+ */
}

line-height: （和input框的高度一樣高）---pc端解決方法
line-height：normal ---移動端解決方法

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0;
}

$(function () {
    //獲取瀏覽器的userAgent,并轉(zhuǎn)化為小寫
    var ua = navigator.userAgent.toLowerCase();
    //判斷是否是蘋果手機(jī)，是則是true
    var isIos = (ua.indexOf("iphone") != -1) || (ua.indexOf("ipad") != -1);
    if (isIos) {
        $("input:file").removeAttr("capture");
    };
})

這個不是 BUG，由于自動播放網(wǎng)頁中的音頻或視頻，會給用戶帶來一些困擾或者不必要的流量消耗，所以蘋果系統(tǒng)和安卓系統(tǒng)通常都會禁止自動播放和使用 JS 的觸發(fā)播放，必須由用戶來觸發(fā)才可以播放。
解決方法思路：先通過用戶 touchstart 觸碰，觸發(fā)播放并暫停（音頻開始加載，后面用 JS 再操作就沒問題了）。

document.addEventListener("touchstart",function() {
  document.getElementsByTagName("audio")[0].play();
  document.getElementsByTagName("audio")[0].pause();
});

這個目前沒有好的辦法解決
情景一：頁面有視頻，點(diǎn)擊頁面按鈕顯示彈出層（比如讓用戶輸入用戶信息），這時候視頻會出現(xiàn)在彈出層上面，是不是很-d疼？
方案：點(diǎn)擊按鈕時候把video隱藏hide，關(guān)閉彈出層show，過程中視頻聲音還在
情景二：頁面很長，往下翻滾時，視頻在播放，脫離文檔流
方案：頁面滾動到某一合適位置把video隱藏hide，回滾到某一位置show，過程中視頻聲音還在

this.value = this.value.replace(/u2006/g,"");

iOS 瀏覽器橫屏?xí)r會重置字體大小，設(shè)置 text-size-adjust 為 none 可以解決 iOS 上的問題，但桌面版 Safari 的字體縮放功能會失效，因此最佳方案是將 text-size-adjust 為 100% 。

-webkit-text-size-adjust:100%;
-ms-text-size-adjust:100%;
text-size-adjust:100%;

原因：瀏覽器興起初期，為了判斷用戶是雙擊還是單擊，就設(shè)置了一個時間段300ms，用戶單擊后300ms后做事件處理，如果在300ms內(nèi)連續(xù)點(diǎn)擊，就判斷為雙擊，做雙擊處理事件。
所以現(xiàn)在用click綁定事件呢，就會有300ms延遲的問題。
300ms尚可接受，不過因為300ms產(chǎn)生的問題，我們必須要解決。300ms導(dǎo)致用戶體驗并不是很好，解決這個問題，我們一般在移動端用tap事件來取代click事件。
推薦兩個js，一個是fastclick，一個是tap.js

解決 ie9 以下瀏覽器對 html5 新增標(biāo)簽不識別的問題
html5shiv.js

解決 ie9 以下瀏覽器不支持 CSS3 Media Query 的問題。
respond.js

高版本的瀏覽器用了低版本的瀏覽器無法識別的元素，從而導(dǎo)致不能解析。這點(diǎn)主要體現(xiàn)在html5的新標(biāo)簽上

htmlshim框架可以讓低于IE9的瀏覽器支持html5

img的alt屬性，在圖片不存在的情況下，各瀏覽器的解析不一致

在chrome下顯示的是一張破損的圖片，在ff下顯示的是alt的文字，而在IE中顯示的是破損的圖片加文字

ul標(biāo)簽內(nèi)外邊距問題

ul標(biāo)簽在IE6IE7中，有個默認(rèn)的外邊距，但是在IE8以上及其他瀏覽器中有個默認(rèn)的內(nèi)邊距

    

    
文字
    
文字
    
文字
    

IE的打印結(jié)果，有3個子節(jié)點(diǎn)，并且都為P元素；非IE則表現(xiàn)出極大的差異：居然打印出了7個子節(jié)點(diǎn)，當(dāng)然也包括3個P元素子節(jié)點(diǎn)在內(nèi)，除此之外還多了4個nodeType=3的子節(jié)點(diǎn)
改寫為：

    
文字
文字
文字

1、圖片間隙

A)div中的圖片間隙(該bug出現(xiàn)在IE6及更低版本中)
描述：在div中插入圖片時，圖片會將div下方撐大三像素。
hack1:將

與寫在一行上；
hack2:將轉(zhuǎn)為塊狀元素，給添加聲明：display:block;

B)dt,li中圖片間隙（IE6）
hack:添加聲明：display:block;
overflow:hidden;

2、 默認(rèn)高度（IE6）

描述：在IE6及以下版本中，部分塊元素?fù)碛心J(rèn)高度（低于18px~22px高度）
hack1:給元素添加聲明：font-size:0;
hack2：給元素添加聲明：overflow:hidden;

3、雙倍浮向（雙倍邊距）
描述：當(dāng)Ie6及更低版本瀏覽器在解析浮動元素時，會錯誤地把浮向邊邊界加倍顯示。
hack:給浮動元素添加聲明：display:inline;

4 、 百分比bug
描述：在IE6及以下版本中在解析百分比時，會按四舍五入方式計算從而導(dǎo)致50%加50%大于100%的情況。
hack:給右面的浮動元素添加聲明：clear:right; 意思：清除右浮動。
clear 清除浮動
clear:left;清除左浮動
clear:right;清除右浮動
clear:both 清除兩邊浮動

5、表單元素行高不一致(IE,MOZ,C,O,S)
描述：表單元素行高對齊方式不一致
hack:給表單元素添加聲明：float:left;

6、按鈕元素默認(rèn)大小不一
描述：各瀏覽器中按鈕元素大小不一致
hack：統(tǒng)一大小
hack2:input外邊套一個標(biāo)簽，在這個標(biāo)簽里寫按鈕的樣式，把input的邊框 和背景色去掉。
hack3:如果這個按鈕是一個圖片，直接把圖片作為按鈕的背景圖即可。
瀏覽器解析按鈕邊框時，會把邊框解析在按鈕內(nèi)部，不會影響按鈕的原有大小

7)透明屬性
IE瀏覽器寫法：filter:alpha(opacity=value);
兼容其他瀏覽器寫法：opacity:.value;(value的取值范圍0-9)

在IE6及更低版本的瀏覽器里，如果想去掉input的默認(rèn)邊框，需將其border屬性值設(shè)置成0方可兼容多個瀏覽器。

bug:子元素沒設(shè)置任何浮動，設(shè)置了margin-top屬性后，會錯誤的把margin-top的屬性值添加給父元素.（塊元素）
hack1:給父元素添加overflow:hidden；聲明。
如果父元素設(shè)置了浮動屬性也不會出現(xiàn)這個問題。

在屬性前可加以上這三個符號
_ 只有IE6以下支持,例如_height:100px;

只有IE7以下支持,例如*height:100px;

+只有IE7以下支持,例如+height:100px;
針對IE8加屬性值后綴0（數(shù)字零）,例如：height:200px0;

！important優(yōu)先級聲明，只有高版本支持，IE6不支持

main{height:60px!important;} 

解決方法：
例如：

 main{height:60px!important;height:70px;} 

注：同時設(shè)兩個高度，優(yōu)先級聲明的屬性要放到前面。

（四）JavaScript 兼容性 1、瀏覽器的寬高問題

var winW=document.body.clientWidth||document.docuemntElement.clientWidth;//網(wǎng)頁可見區(qū)域?qū)?    var winH=document.body.clientHeight||document.docuemntElement.clientHeight;//網(wǎng)頁可見區(qū)域?qū)?    //以上為不包括邊框的寬高，如果是offsetWidth或者offsetHeight的話包括邊框

var winWW=document.body.scrollWidth||document.docuemntElement.scrollWidth;//整個網(wǎng)頁的寬
var winHH=document.body.scrollHeight||document.docuemntElement.scrollHeight;//整個網(wǎng)頁的高

var scrollHeight=document.body.scrollTop||document.docuemntElement.scrollTop;//網(wǎng)頁被卷去的高
var scrollLeft=document.body.scrollLeft||document.docuemntElement.scrollLeft;//網(wǎng)頁左卷的距離

var screenH=window.screen.height;//屏幕分辨率的高
var screenW=window.screen.width;//屏幕分辨率的寬
var screenX=window.screenLeft;//瀏覽器窗口相對于屏幕的x坐標(biāo)（除了FireFox）
var screenXX=window.screenX;//FireFox相對于屏幕的X坐標(biāo)
var screenY=window.screenTop;//瀏覽器窗口相對于屏幕的y坐標(biāo)（除了FireFox）
var screenYY=window.screenY;//FireFox相對于屏幕的y坐標(biāo)

2、event事件問題

/event事件問題
    document.onclick=function(ev){//谷歌火狐的寫法，IE9以上支持，往下不支持；
        var e=ev;
        console.log(e);
    }
    document.onclick=function(){//谷歌和IE支持，火狐不支持；
        var e=event;
        console.log(e);
    }
    document.onclick=function(ev){//兼容寫法；
        var e=ev||window.event;
        var mouseX=e.clientX;//鼠標(biāo)X軸的坐標(biāo)
        var mouseY=e.clientY;//鼠標(biāo)Y軸的坐標(biāo)
    }

3、DOM節(jié)點(diǎn)相關(guān)的問題

 function nextnode(obj){//獲取下一個兄弟節(jié)點(diǎn)
        if (obj.nextElementSibling) {
            return obj.nextElementSibling;
        } else{
            return obj.nextSibling;
        };
    }
    function prenode(obj){//獲取上一個兄弟節(jié)點(diǎn)
        if (obj.previousElementSibling) {
            return obj.previousElementSibling;
        } else{
            return obj.previousSibling;
        };
    }
    function firstnode(obj){//獲取第一個子節(jié)點(diǎn)
        if (obj.firstElementChild) {
            return obj.firstElementChild;//非IE678支持
        } else{
            return obj.firstChild;//IE678支持
        };
    }
    function lastnode(obj){//獲取最后一個子節(jié)點(diǎn)
        if (obj.lastElementChild) {
            return obj.lastElementChild;//非IE678支持
        } else{
            return obj.lastChild;//IE678支持
        };
    }

4、document.getElementsByClassName問題

//通過類名獲取元素
    document.getElementsByClassName("");//IE 6 7 8不支持；

    //這里可以定義一個函數(shù)來解決兼容問題，當(dāng)然別在這給我提jQuery...
    //第一個為全局獲取類名，第二個為局部獲取類名
    function byClass1(oClass){//全局獲取，oClass為你想要查找的類名，沒有“.”
        var tags=document.all?document.all:document.getElementsByTagName("*");
        var arr=[];
        for (var i = 0; i < tags.length; i++) {
            var reg=new RegExp(""+oClass+"","g");
            if (reg.test(tags[i].className)) {
                arr.push(tags[i]);
            };
        };
        return arr;//注意返回的也是數(shù)組，包含你傳入的class所有元素；
    }

    function byClass2(parentID,oClass){//局部獲取類名，parentID為你傳入的父級ID
        var parent=document.getElementById(parentID);
        var tags=parent.all?parent.all:parent.getElementsByTagName("*");
        var arr=[];
        for (var i = 0; i < tags.length; i++) {
        var reg=new RegExp(""+oClass+"","g");
            if (reg.test(tags[i].className)) {
                arr.push(tags[i]);
            };
        };
        return arr;//注意返回的也是數(shù)組，包含你傳入的class所有元素；
     }

5、獲取元素的非行間樣式值

//獲取元素的非行間樣式值
     function getStyle(object,oCss) {
             if (object.currentStyle) {
                 return object.currentStyle[oCss];//IE
             }else{
                 return getComputedStyle(object,null)[oCss];//除了IE
             }
     }

6、設(shè)置監(jiān)聽事件

 function addEvent(obj,type,fn){//添加事件監(jiān)聽，三個參數(shù)分別為 對象、事件類型、事件處理函數(shù)，默認(rèn)為false
        if (obj.addEventListener) {
            obj.addEventListener(type,fn,false);//非IE
        } else{
            obj.attachEvent("on"+type,fn);//ie,這里已經(jīng)加上on，傳參的時候注意不要重復(fù)加了
        };
    }
    function removeEvent(obj,type,fn){//刪除事件監(jiān)聽
        if (obj.removeEventListener) {
            obj.removeEventListener(type,fn,false);//非IE
        } else{
            obj.detachEvent("on"+type,fn);//ie，這里已經(jīng)加上on，傳參的時候注意不要重復(fù)加了
        };
    }

7、元素到瀏覽器邊緣的距離

 function offsetTL(obj){//獲取元素內(nèi)容距離瀏覽器邊框的距離（含邊框）
        var ofL=0,ofT=0;
        while(obj){
            ofL+=obj.offsetLeft+obj.clientLeft;
            ofT+=obj.offsetTop+obj.clientTop;
            obj=obj.offsetParent;
        }
        return{left:ofL,top:ofT};
    }

8、阻止默認(rèn)事件

//js阻止默認(rèn)事件
    document.onclick=function(e){
        var e=e||window.event;
        if (e.preventDefault) {
            e.preventDefault();//W3C標(biāo)準(zhǔn)
        }else{
            e.returnValue="false";//IE..
        }
    }

9、關(guān)于EVENT事件中的target

//關(guān)于event事件中的target
    document.onmouseover=function(e){
        var e=e||window.event;
        var Target=e.target||e.srcElement;//獲取target的兼容寫法，后面的為IE
        var from=e.relatedTarget||e.formElement;//鼠標(biāo)來的地方，同樣后面的為IE...
        var to=e.relatedTarget||e.toElement;//鼠標(biāo)去的地方
    }

10、鼠標(biāo)滾輪滾動事件

//鼠標(biāo)滾輪事件
    //火狐中的滾輪事件
    document.addEventListener("DOMMouseScroll",function(event){
        alert(event.detail);//若前滾的話為 -3，后滾的話為 3
    },false)
    //非火狐中的滾輪事件
    document.onmousewheel=function(event){
        alert(event.detail);//前滾：120，后滾：-120
    }

完結(jié)

• 上一篇：從底層看JS執(zhí)行機(jī)制
• 下一篇：重復(fù)操作算法（JavaScript）