一：不同瀏覽器的標籤預設的外邊距和內邊距不同。

問題症狀：隨便寫幾個標籤，不加樣式控制的情況下，各自的margin 和padding差異較大。

解決方案：這個是最常見的也是最易解決的一個瀏覽器相容性問題，幾乎所有的CSS檔案開頭都會用萬用字元*來設定各個標籤的內外邊距為0。

二：塊屬性標籤float後，又有橫向的margin情況下，在IE6中顯示的margin比設定的大。

問題症狀:  常見症狀是IE6中後面的一塊被頂到下一行。

解決方案：在float的標籤樣式控制中加入 display:inline;將其轉化為行內屬性。

三：設定較小高度標籤（一般小於10px），在IE6，

問題症狀：IE6、7和遨遊裡這個標籤的高度不受控制，超出自己設定的高度。

解決方案：給超出高度的標籤設定overflow:hidden;或者設定行高line-height 小於你設定的高度。

備註：出現這個問題的原因是IE8之前的瀏覽器都會給標籤一個最小預設的行高的高度。即使你的標籤是空的，這個標籤的高度還是會達到預設的行高。

四：圖片預設有間距。

問題症狀：幾個img標籤放在一起的時候，有些瀏覽器會有預設的間距，加了問題一中提到的萬用字元也不起作用。

解決方案：使用float屬性為img佈局或者刪除img之間的回車鍵

五：標籤最低高度設定min-height不相容。

問題症狀：因為min-height本身就是一個不相容的CSS屬性，所以設定min-height時不能很好的被各個瀏覽器相容。

解決方案：如果我們要設定一個標籤的最小高度200px，需要進行的設定為：

{
   min-height:200px;
   height:auto !important;
   height:200px; 
   overflow:visible;
}

六： 如果圖片加a標籤在IE9-中會有邊框 

解決方案：

img{
  border:none;
}

七： rgba不支援IE8。

: 可以用 opacity  程式碼如下：

{
  opacity:0.7;/*FF chrome safari opera*/ 
  filter:alpha(opacity:70);/*用了ie濾鏡,可以相容ie*/
}
/* 注意: opacity會影響裡面元素的透明度 */

八：事件event物件相關相容性問題。

解決方案 :

//原生js獲取事件物件相容性寫法:
dom.onclick = function (event){
    var evt = event || window.event;
}

九：阻止預設事件。

相容性寫法：

//js阻止預設事件
    document.onclick=function(e){
        var e=e||window.event;
        if (e.preventDefault) {
            e.preventDefault();//W3C標準
        }else{
            e.returnValue='false';//IE..
        }
    }

十：阻止事件冒泡。

相容性寫法：

//js阻止事件傳播
    document.onclick=function(e){
        var e=e||window.event;
        if (e.stopPropagation) {
            e.stopPropagation();//W3C標準
        }else{
            e.cancelBubble=true;//IE....
        }
    }

十一：監聽事件。

相容性寫法：

// 這裡使用click事件為例
//新增監聽事件
obj.addEventListener('click',fn,false);//非IE
obj.attachEvent('onclick',fn);// IE
// 刪除監聽事件
obj.removeEventListener('click',fn,false);//非IE
obj.detachEvent('onclick',fn);//IE