一、出現相容問題的原因：

        瀏覽器種類很多，但是區別主要在瀏覽器核心的不同，所以各核心對網頁的解析差異，是導致瀏覽器相容問題出現的主要原因。關於瀏覽器核心（browser kernel)，是瀏覽器最為核心的部分，可以分為兩部分，一部分是渲染引擎（render engineer或layout engineer)，方負責生成DOM樹，render，repaint這些工作；另一部分是JS引擎，負責JS的解釋執行。它的存在，決定了網頁的呈現的內容、格式以及效果。所以，好用的瀏覽器，一定是基於有一個穩定、高階、作用明顯的瀏覽器核心。 

目前主流的四大瀏覽器核心有 Trident  、 Gecko  、WebKit  （Chromium（Blink，V8）），Presto  ，其中chromium是webkit分支出來的。

列舉一些核心下的代表瀏覽器

Trident：IE、Maxthon、TT； 

Gecko：Netcape6及以上版本、FireFox；

Presto：Opera7及以上版本；

Webkit：Safari、Chrome。 

國內的瀏覽器（諸如360，QQ，搜狗）大多數用了第三方的核心，區別只在於外觀和功能性差異。（有些瀏覽器是雙核模式，標準模式下是chrome的核心，相容模式下是IE的核心）。

二、相容問題分類（HTML部分 , CSS樣式的相容性 , JS的相容性）

1、HTML相容問題 是因為高版本瀏覽器用了低版本瀏覽器無法識別的元素，導致不能解析。特別是HTML5增加了許多新標籤。所以在開發的時候首先明確專案要相容哪些瀏覽器的最低版本，比如專案要求相容IE8.0以上的版本，Chrome 48以上，FireFox 44以上。有了最基本的要求，在開發中就需要考慮到CSS樣式和JS程式碼在這些瀏覽器的相容性了。

（1）解決H5新標籤在IE9以下的瀏覽器不識別問題（html5shiv.js下載地址：https://github.com/aFarkas/html5shiv/releases

<!--[if lt IE 9]>
 <script type="text/javascript" src="js/html5shiv.js"></script>
<![endif]-->

html, body, div, ul, li, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ol, form, input, textarea, th, td, select

{margin:0;padding:0}

或者使用萬用字元 * ，一般不建議這樣簡單粗暴，不嚴謹哈哈

*{margin:0;padding:0}

（1）IE條件註釋  （僅僅針對IE瀏覽器，對其他瀏覽器無效）

例如下面的語法：

 <!--[if IE 7]>此處程式碼內容只有IE7.0可見<![endif]-->

（2）屬性過濾器（較為常用的hack方法）----轉載

針對不同的IE瀏覽器，可以使用不同的字元來讓特定的版本的IE瀏覽器進行樣式控制。

至於一些的關於屬性選擇器的過濾的方法這邊就不再介紹了，因為這些都沒有必要了，我想不到還有哪些喪心病狂的專案會要求相容到IE6以下或者更低的了！

行內屬性設定了塊級屬性（display: block;）後，會產生雙倍邊距。
解決方案是在新增一個 display: inline; 或者 display: table;

（4）雙倍margin

浮動元素設定了margin在IE6下會產生雙倍margin。
解決辦法：只要給浮動元素轉行級設定 display: inline;或者使用IE6的hack：_margin；

    W3C標準盒模型： margin 、border、 padding、 content；元素寬高是content的寬高。

    IE盒模型：margin 、 content（包含border、padding）；元素的寬高也是content，裡面有邊框和內填充。

    使用CSS3中的box-sizing的屬性：content-box(預設狀態，標準盒模型)； border-box（IE盒模型）。

（6）img標籤-圖片存在邊距

       在不同瀏覽器下圖片下面會出現莫名的下邊距，經測算在FF中 下邊距大概是多出了3畫素左右。

    解決方法：

        1.將img塊狀化display：block;

        2.將img設定浮動 float：left

        3.為img新增樣式 vertical-align:top|bottom|text-top|text-bottom;注：定義vertical- align為middle時在IE6中大概還有一畫素的頂邊距，最好為top或bottom。

        4.為img的父級加高度 height

        5.為img的父級加樣式 font-size:0;需要考慮父級中的文字大小。

(7）min-height的相容寫法（沒用過）

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

(8)IE6最小寬度

IE6沒有min-width的概念，如想設定，可以解決.

.box{
        min-width:600px;
	_width: expression(document.body.clientWidth < 600? "600px":"auto");
}

(9).a標籤CSS順序

被點選過後的超連結不再具有hover和active屬性，會疑惑為什麼寫的樣式沒有效果，其實只是寫的樣式被覆蓋了，正確的a標籤順序應該：

• link
• visited
• hover
• active

• 新增overflow的屬性：overflow:hidden
• 設定font-size的屬性為高度的大小
• line-height屬性設定為高度大小

3、JS的相容問題 （主要是原生JavaScript程式碼，其實現在有了前端框架和各種庫已經幫我們解決了各種相容問題）

（1）標準的事件繫結方法函式為addEventListener，但IE下是attachEvent；