前言：

不同瀏覽器的內(nèi)核不盡相同，所以各個(gè)瀏覽器對(duì)網(wǎng)頁(yè)的解析存在一定的差異。
瀏覽器內(nèi)核主要分為兩種，一是渲染引擎，另一個(gè)是js 引擎
所以瀏覽器兼容性問(wèn)題一般指：css兼容、js兼容

一、css兼容

1. 不同瀏覽器的標(biāo)簽?zāi)J(rèn)的margin和padding不同

問(wèn)題癥狀： 隨便寫(xiě)幾個(gè)標(biāo)簽，不加樣式控制的情況下，各自的margin 和padding差異較大。

碰到頻率: 100%

解決方案：

CSS里 *{margin:0;padding:0;} 但是性能不好一般我們會(huì)引入reset.css樣式重置；

備注： 這個(gè)是最常見(jiàn)的也是最易解決的一個(gè)瀏覽器兼容性問(wèn)題，所有的CSS文件開(kāi)頭都會(huì)用樣式重置各個(gè)標(biāo)簽的內(nèi)外補(bǔ)丁是0。

2. css3新屬性，加瀏覽器前綴兼容早期瀏覽器

-moz- /* 火狐瀏覽器 /
-webkit- / Safari, 谷歌瀏覽器等使用Webkit引擎的瀏覽器 /
-o- / Opera瀏覽器(早期) /
-ms- / IE */

哪些css3屬性需要加：

定義關(guān)鍵幀動(dòng)畫(huà) @keyframes
css3中的變形（transform）、過(guò)渡(transtion)、動(dòng)畫(huà)(animation)
border-radius 圓角
box-shadow  盒子陰影
flex  彈性布局

使用：

.myClass {
	-webkit-animation-name: fadeIn;
	-moz-animation-name: fadeIn;
	-o-animation-name: fadeIn;
	-ms-animation-name: fadeIn;
	animation-name: fadeIn;  /* 不帶前綴的放到最后 */
}
/* 復(fù)雜屬性 keyframes */
@-webkit-keyframes fadeIn {
	0% { opacity: 0; } 100% { opacity: 0; }
}
@-moz-keyframes fadeIn {
	0% { opacity: 0; } 100% { opacity: 0; }
}
@-o-keyframes fadeIn {
	0% { opacity: 0; } 100% { opacity: 0; }
}
@-ms-keyframes fadeIn {
	0% { opacity: 0; } 100% { opacity: 0; }
}
/* 不帶前綴的放到最后 */
@keyframes fadeIn {
	0% { opacity: 0; } 100% { opacity: 0; }
}

3. 塊屬性標(biāo)簽float后，又有橫行的margin情況下，IE 瀏覽器margin加倍的問(wèn)題

問(wèn)題癥狀: 常見(jiàn)癥狀是IE6中后面的一塊被頂?shù)较乱恍?/p>

解決方案： 設(shè)置為float的div在ie下設(shè)置的margin會(huì)加倍。這是一個(gè)ie6都存在的bug。解決方案是在這個(gè)div里面加上display:inline;

<divid=”imfloat”>
相應(yīng)的css為
# imfloat{
float:left;
margin:5px;//IE下理解為10px
display:inline;//IE下再理解為5px}

備注： 我們最常用的就是div+CSS布局了，而div就是一個(gè)典型的塊屬性標(biāo)簽，橫向布局的時(shí)候我們通常都是用div float實(shí)現(xiàn)的，橫向的間距設(shè)置如果用margin實(shí)現(xiàn)，這就是一個(gè)必然會(huì)碰到的兼容性問(wèn)題。

4. 設(shè)置較小高度標(biāo)簽（一般小于10px），在IE6，IE7，遨游中高度超出自己設(shè)置高度

問(wèn)題癥狀： 設(shè)置div高度小于10px，IE6、7和遨游里div的高度，超出自己設(shè)置的10px.

碰到頻率： 60%

解決方案：

給超出高度的標(biāo)簽設(shè)置:hidden;

或者設(shè)置行高line-height 小于你設(shè)置的高度。

備注： 這種情況一般出現(xiàn)在我們?cè)O(shè)置小圓角背景的標(biāo)簽里。出現(xiàn)這個(gè)問(wèn)題的原因是IE8之前的瀏覽器都會(huì)給標(biāo)簽一個(gè)最小默認(rèn)的行高的高度。即使你的標(biāo)簽是空的，這個(gè)標(biāo)簽的高度還是會(huì)達(dá)到默認(rèn)的行高。

5. 行內(nèi)屬性標(biāo)簽，設(shè)置display:block后采用float布局，又有橫行的margin的情況，IE6間距bug

問(wèn)題癥狀： IE6里的間距比超過(guò)設(shè)置的間距

碰到幾率： 20%

解決方案： 在display:block;后面加入display:inline;display:table;

備注： 行內(nèi)屬性標(biāo)簽，為了設(shè)置寬高，我們需要設(shè)置display:block;(除了input/img標(biāo)簽比較特殊)。在用float布局并有橫向的margin后，在IE6下，他就具有了塊屬性float后的橫向margin的bug。不過(guò)因?yàn)樗旧砭褪切袃?nèi)屬性標(biāo)簽，所以我們?cè)偌由蟙isplay:inline的話，它的高寬就不可設(shè)了。這時(shí)候我們還需要在display:inline后面加入display:talbe

6. IE瀏覽器div最小寬度和高度的問(wèn)題

問(wèn)題癥狀： IE瀏覽器div最小寬度和高度不生效

IE不認(rèn)得min-這個(gè)定義，但實(shí)際上它把正常的width和height當(dāng)作有min的情況來(lái)使。這樣問(wèn)題就大了，如果只用寬度和高度，正常的瀏覽器里這兩個(gè)值就不會(huì)變，如果只用min-width和min-height的話，IE下面根本等于沒(méi)有設(shè)置寬度和高度。

比如要設(shè)置背景圖片，這個(gè)最小寬度是比較重要的。要解決這個(gè)問(wèn)題，可以這樣：

#box{
  width: 80px;
  height: 35px;
  }
html>body #box{
 width: auto;
 height: auto; 
 min-width: 80px; 
 min-height: 35px;
 }

7. 超鏈接訪問(wèn)過(guò)后hover樣式就不出現(xiàn)的問(wèn)題

被點(diǎn)擊訪問(wèn)過(guò)的超鏈接樣式不在具有hover和active了,很多人應(yīng)該都遇到過(guò)這個(gè)問(wèn)題,解決技巧是改變CSS屬性的排列順序: L-V-H-A

Code:

<style type="text/css">
a:link {}
a:visited {}
a:hover {}
a:active {}
</style>

8. 圖片默認(rèn)有間距

問(wèn)題癥狀： 幾個(gè)img標(biāo)簽放在一起的時(shí)候，有些瀏覽器會(huì)有默認(rèn)的間距，通配符清除間距也不起作用。

碰到幾率： 20%

解決方案： 使用float屬性為img布局(所有圖片左浮)

備注： 因?yàn)閕mg標(biāo)簽是行內(nèi)屬性標(biāo)簽，所以只要不超出容器寬度，img標(biāo)簽都會(huì)排在一行里，但是部分瀏覽器的img標(biāo)簽之間會(huì)有個(gè)間距。去掉這個(gè)間距使用float是正道。

9. css hack解決瀏覽器兼容性

不同瀏覽器，識(shí)別不同的樣式，csshack本身就是處理瀏覽器兼容的。

下面是css hack寫(xiě)法：

background-color:yellow0; 0 是留給ie8的
+background-color:pink;   + ie7定了；
_background-color:orange; _專(zhuān)門(mén)留給神奇的ie6；

二、js兼容

1. 事件綁定

IE: dom.();

標(biāo)準(zhǔn)瀏覽器： dom.(‘click',(event){},false);

標(biāo)準(zhǔn)瀏覽器采用事件捕獲的方式對(duì)應(yīng)IE的事件冒泡機(jī)制（即標(biāo)準(zhǔn)由最外元素至最內(nèi)元素或者IE由最內(nèi)元素到最外元素）最后標(biāo)準(zhǔn)方亦覺(jué)得IE這方面的比較合理，所以便將事件冒泡納入了標(biāo)準(zhǔn)，這也是第三個(gè)參數(shù)的由來(lái)，而且事件冒泡作為了默認(rèn)值第三值默認(rèn)false，表示事件冒泡方式。

如果瀏覽器不支持 ()方法, 你可以使用 ()方法替代。

以下實(shí)例演示了跨瀏覽器的解決方法：

var x = document.getElementById("myBtn");
if (x.addEventListener) {   //所有主流瀏覽器，ie9+
    x.addEventListener("click", myFunction);
} else if (x.attachEvent) {      // IE 8 及更早 IE 版本
    x.attachEvent("onclick", myFunction);
}

2. event事件對(duì)象問(wèn)題

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

2. event.(事件源對(duì)象)問(wèn)題

IE： event對(duì)象有屬性，但是沒(méi)有target屬性；

Firefox: event對(duì)象有target屬性，但是沒(méi)有屬性。

解決方法：

srcObj = event.srcElement?event.srcElement:event.target;

3. 獲取元素的非行間樣式值：

IE: dom.[‘width’] 獲取元素高度

標(biāo)準(zhǔn)瀏覽器： window.(obj, null)['width'];

跨瀏覽器兼容解決方法：

 // 獲取元素屬性值的兼容寫(xiě)法
  function getStyle(obj,attr){
      if(obj.currentStyle){
         //兼容IE
 　　　　　　obj.currentStyle[attr];
          return obj.currentStyle[attr];
      }else{
         //非IE，
 　　　　return window.getComputedStyle(obj, null)[attr]; 
 　    }
 　 }

4. 阻止事件冒泡傳播：

//js阻止事件傳播，這里使用click事件為例
    document.onclick=function(e){
        var e=e||window.event;
        if (e.stopPropagation) {
            e.stopPropagation();//W3C標(biāo)準(zhǔn)
        }else{
            e.cancelBubble=true;//IE....
        }
    }

5. 阻止事件默認(rèn)行為：

//js阻止默認(rèn)事件   一般阻止a鏈接href，form表單submit提交
    document.onclick=function(e){
        var e=e||window.event;
        if (e.preventDefault) {
            e.preventDefault();//W3C標(biāo)準(zhǔn)
        }else{
            e.returnValue='false';//IE..
        }
    }

6. ajax兼容問(wèn)題

IE：