（一）html部分

1.H5新標簽在IE9以下的瀏覽器識別

https://github.com/aFarkas/html5shiv/releases

2.ul標簽內外邊距問題ul標簽在IE6\IE7中，有個默認的外邊距，但是在IE8以上及其他瀏覽器中有個默認的內邊距。解決方法：統一設置ul的內外邊距為0

（二）CSS樣式的兼容性

1.css的hack問題：主要針對IE的不同版本，不同的瀏覽器的寫法不同
IE的條件註釋hack：
<!--[if IE 6]>此處內容只有IE6.0可見<![endif]-->
<!--[if IE 7]>此處內容只有IE7.0可見<![endif]-->

2.IE6雙邊距問題：IE6在浮動後，又有橫向的margin，此時，該元素的外邊距是其值的2倍
解決辦法：display:block;

3.IE6下圖片的下方有空隙
解決方法：給img設置display:block;

4.IE6下兩個float之間會有個3px的bug
解決辦法：給右邊的元素也設置float:left;

5.IE6下沒有min-width的概念，其默認的width就是min-width

6.IE6下在使用margin:0 auto;無法使其居中
解決辦法：為其父容器設置text-align:center;

7.被點擊過後的超鏈接不再具有hover和active屬性
解決辦法:按lvha的順序書寫css樣式，
":link": a標簽還未被訪問的狀態；
":visited": a標簽已被訪問過的狀態；
":hover": 鼠標懸停在a標簽上的狀態；
":active": a標簽被鼠標按著時的狀態；

8.在使用絕對定位或者相對定位後，IE中設置z-index失效，原因是因為其元素依賴於父元素的z-index，但是父元素默認為0， 子高父低，所以不會改變顯示的順序

9.IE6下無法設置1px的行高，原因是由其默認行高引起的
解決辦法：為期設置overflow:hidden;或者line-height:1px;

（三）JavaScript的兼容性

1.標準的事件綁定方法函數為addEventListener，但IE下是attachEvent；

2.事件的捕獲方式不一致，標準瀏覽器是由外至內，而IE是由內到外，但是最後的結果是將IE的標準定為標準

3.window.event獲取的。並且獲取目標元素的方法也不同，標準瀏覽器是event.target，而IE下是event.srcElement

4.在低版本的IE中獲取的日期處理函數的值不是與1900的差值，但是在高版本的IE中和標準瀏覽器保持了一致，獲取的值也是與1900的差值。
比如：var year= new Date().getYear();

5.ajax的實現方式不同，這個我所理解的是獲取XMLHttpRequest的不同，IE下是activeXObject

6.IE中不能操作tr的innerHtml7.獲得DOM節點的父節點、子節點的方式不同
其他瀏覽器：parentNode parentNode.childNodes
IE：parentElement parentElement.children

瀏覽器兼容是前端開發人員必須掌握的一個技能，但是初入前端的同學或者其他後臺web開發同學往往容易選擇忽略，而形成兩個極端：

1 我最開始都是使用IE6，IE6上沒問題，其它瀏覽器坑爹（多出現與前端後端一起搞的同學，小生2年前就這種狀態，鼓勵人家用ie6.。。。）

2 我要遵循標準，我只要ff就好，IE就是坑爹的玩意，我不必去理他（小生一年前的心態。。。）

現在看來，之前的想法都是不對的，我們誠然應該追求最新的瀏覽器使用最新的技術，但是漸進增強，向後兼容的思想一定要有，

因為就現在IE6在中國的份額也是不容小視的。

拋開之前的大道理，我們說點實際的問題，哪次前端面試不問兼容性問題？哪次我們又能回答的很好？反正我就沒一次說好的，知不足然後能改，

我前段時間便經過整理形成這篇文章，文章有很多不足，希望各位指正、補充，後面若是能形成一篇較全面的前端兼容文章就善莫大焉了！

為什麽會有兼容問題？

由於市場上瀏覽器種類眾多，而不同瀏覽器其內核亦不盡相同，所以各個瀏覽器對網頁的解析就有一定出入，這也是導致瀏覽器兼容問題出現的主要原因，我們的網頁需要在主流瀏覽器上正常運行，就需要做好瀏覽器兼容。

而我現在所說的兼容性問題，主要是說IE與幾個主流瀏覽器如firefox，google等。

而對IE瀏覽器來說，IE7又是個跨度，因為之前的版本更新甚慢，bug甚多。從IE8開始，IE瀏覽器漸漸遵循標準，到IE9後由於大家都一致認為標準很重要，可以說在兼容性上比較好了，但是在中國來說，由於xp的占有率問題，使用IE7以下的用戶仍然很多，所以我們不得不考慮低版本瀏覽器的兼容。

對瀏覽器兼容問題，我一般是這樣分類的，HTML，Javascript兼容，CSS兼容。 其中html相關問題比較容易處理，無非是高版本瀏覽器用了低版本瀏覽器無法識別的元素，導致其不能解析，所以平時註意一點就是。特別是HTML5增加了許多新標簽，低版本瀏覽器有點影響時代進步啊；

javascript兼容性問題

在javascript中，各個瀏覽器基本語法差距不大，其兼容問題主要出現在各個瀏覽器的實現上，尤其對事件的支持有很大問題，在此我就說說我知道的幾個問題。

① 在標準的事件綁定中綁定事件的方法函數為 addEventListener,而IE使用的是attachEvent

② 標準瀏覽器采用事件捕獲的方式對應IE的事件冒泡機制（即標準由最外元素至最內元素或者IE由最內元素到最外元素）最後標準方亦覺得IE這方面的比較合理，所以便將事件冒泡納入了標準，這也是addEventListener第三個參數的由來，而且事件冒泡作為了默認值。

③ 事件處理中非常有用的event屬性獲得亦不相同，標準瀏覽器是作為參數帶人，而ie是window.event方式獲得，獲得目標元素ie為e.srcElement 標準瀏覽器為e.target

④ 然後在ie中是不能操作tr的innerHtml的

⑤ 然後ie日期函數處理與其它瀏覽器不大一致，比如： var year= new Date().getYear(); 在IE中會獲得當前年，但是在firefox中則會獲得當前年與1900的差值。

⑥ 獲得DOM節點的方法有所差異，其獲得子節點方法不一致。

IE：parentElement parentElement.children Firefox：parentNode parentNode.childNodes childNodes的下標的含義在IE和Firefox中不同，Firefox使用DOM規範，childNodes中會插入空白文本節點。一般可以通過node.getElementsByTagName()來回避這個問題。

當html中節點缺失時，IE和Firefox對parentNode的解釋不同。例如:

<form> <table> <input/> </table> </form> IE：input.parentNode的值為空節點 Firefox：input.parentNode的值為form 解決方法：Firefox中節點沒有removeNode方法，必須使用如下方法 node.parentNode.removeChild(node)

⑦ 關於AJAX的實現上亦有所不同；

就javascript來說，各大瀏覽器之間的差異還是不少的，但是具體我變得這裏都不大關註了，因為我們開發過程中一般都會使用類庫，若是不使用，都會自己積累形成一個類庫，所以就js而言，兼容性問題基本解決了。

讓人頭疼的CSS兼容

因為之前對css的理解不夠深入，也沒有經過系統的學習，所以一度認為css是前端最難的東西，但真的學習後，才發現css真的很難。。。有很多東西啊！！！

我覺得最讓人頭疼的問題還是CSS問題，因為一點點布局上的bug，可能導致整個頁面的錯位，在用戶看來這是極不專業的。

現在我就簡要說說我對CSS兼容問題的認識： 先說點Hack的知識（真正的高手是不用Hack的，但要成為高手必須通過Hack這一關）

接下來說說一些我知道的BUG：

① css盒模型在IE6下解析有問題，我們知道就width來說，一個塊級元素的magin、padding、boder，width7個屬性的寬度之和，應該等於其父級元素的內容區域（width），而我們一般設置寬度若是未達到其長度，瀏覽器就會重置margin-right的值，將之它們的和等於其值，當然若是我們為margin設置負值，那麽元素的width可能超出其父元素。在標準下，width為padding所占區域，但是再ie6中設置width後，其真實width為所設width-其padding與border*2，我一般采用CSShack技術處理

② IE6的雙倍邊距BUG，在塊級元素浮動後本來外邊距10px,但IE解釋為20px,解決辦法是加上display: inline ，

1、問題：在IE6下如果某個標簽使用了float屬性，同時設置了其外補丁“margin:10px 0 0 10px”可以看出，上邊距和左邊距同樣為10px，但第一個對象距左邊有20px。

2、解決辦法：當將其display屬性設置為inline時問題就都解決了。

3、說明：這是因為塊級對象默認的display屬性值是block，當設置了浮動的同時，還設置了它的外邊距 就會出現這種情況。
也許你會問：“為什麽第二個對象和第一個對象之間就不存在雙倍邊距的BUG”？

因為浮動都有其相對應的對象，只有相對於其父對象的浮動 對象才會出現這樣的問題。第一個對象是相對父對象的，而第二個對象是相對第一個對象的，所以第二個對象在設置後不會出現問題。另外在一些特殊布局中，可能需要組合使用display:block;和display:inline;才能達到預期效果。

當然最壞的情況下，我們就可以使用”margin:10px 0 0 10px;*margin:10px 0 0 10px;_margin:10px 0 0 5px”，這種“標準屬性;*IE7識別屬性;_IE6識別屬性”HACK方式解決

4、總結：這個現象僅當塊級對象設置了浮動屬性後才會出現，內聯對象（行級對象）不會出現此問題。並且只有設置左邊距和右邊距的值才會出問題，上下邊距不會出現問題。

<div style=”width:200px;height:50px;background:#ccc;”>

<div style=”width:100px; height:50px;float:left;margin-left:10px; background:#eee;”>

</div>

</div>

margin雙布局可以說是IE6下經典的bug之一。產生的條件是：block元素+浮動+margin。

還記得我自認為會css的那個階段，這個問題我經常碰到，會很熟練的用hack解決這個問題，當時還自以為是，洋洋得意。現在看來，當時的自己嫩的就像個 豆芽菜。真正css厲害的人基本上是不會碰到這個bug的，如果您時不時遇到這個bug，說明您的css還有好一段路要走。

我的體會是越少的浮動，就會越少的代碼，會有更靈活的頁面，會有擴展性更強的頁面。這不多說，歸結為到一定水平了，浮動會用的較少。另外，您也會避免使用浮動+margin的用法。所以，越後來越不易遇到這種bug。

這裏提一下解決方法，使用hack我是不推薦的，使用hack屬於比初學者稍高一點的層次水平。一個頁面，沒有一個hack，但是各個瀏覽器下表現一致，這才是水平。使用display:inline;可以解決這個問題。

而為什麽display:inline可以解決這個雙邊距bug，首先是inline元素或inline-block元素是不存在雙邊距問題的。然後，float:left等浮動屬性可以讓inline元素haslayout，會讓inline元素表現得跟inline-block元素的特性一樣， 支持高寬，垂直margin和padding等，所以div class的所有樣式可以用在這個display inline的元素上。

③ IE6下圖片下方有空隙產生；解決這個BUG的方法也有很多,可以是改變html的排版,或者設置img 為display:block，
或者設置vertical-align 屬性為vertical-align:top bottom middle text-bottom都可以解決.（但是最近我發現這個問題在其它瀏覽器中也有所體現）

④ IE6 3px bug 兩個浮動層中間有間隙，這個IE的3PX BUG也是經常出現的,
解決的辦法是給右邊元素也同樣浮動 float:left 或者相對IE6定義.left margin-right:-3px;
經典兩列布局，float: left;width:200px; 第二個，margin-left,200px; 他們之間會產生3px的間距。

⑤ 在IE6中沒有min-width的概念，其默認width就是min-width，所以有時字體過多它會選擇撐開容器。

⑥ IE6無法定義1px左右高度的容器，是因為默認的行高造成的,解決的方法也有很多, 例如: overflow:hidden zoom:0.08 line-height:1px ⑦ 使用margin ： 0 auto；方法使容器居中依然在IE6中行不通，我們要對其父容器使用

⑧ 被點擊訪問過的超鏈接樣式不在具有hover和active了,很多人應該都遇到過這個問題, 解決方法是改變CSS屬性的排列順序: L-V-H-A <style type=”text/css”> a:link {} a:visited {} a:hover {} a:active {} /style>

⑨ 在使用絕對定位/相對定位時，設置z-index在ie中可能會失效，是因為其元素依賴於其父元素的z-index，而父元素默認為0 ？所以子元素z-index高，而父元素底，依然不會改變其顯示順序；

10、外邊距疊加問題：

#box{ margin:10px; }

#box p { margin:20px; background:gray; }

<div id=”box”><p>dd</p></div>

該代碼會導致外邊距疊加，並且外邊距跑到div包裹外去，bug是由於塊級子元素高度計算方式造成的。
若是元素沒有垂直邊框或者padding，那麽它的高度就是包含的子元素的頂部和底部邊框的的距離。

以上便是我所記得的一些bug，在這裏我再順帶提一下haslayout（IE8廢棄該屬性）。

在IE低版本瀏覽器時基本是表格布局的時代，幾乎是所有的元素（除內聯元素）都是一個盒子，內容不會超過表格的單元格，表格的單元格也不會超出表格。

在IE6推出後，CSS改變這一假設——因為CSS允許內容超出元素。 因此haslayout這個屬性就誕生了。

在IE6，IE7中，每個元素都有haslayout這個屬性，可以設置為 true 或者 false。如果設置為true，元素就必須去自我布局和渲染，因此元素會擴展去包含它溢出的內容，例如浮動或沒截斷的單詞。

如果haslayout 沒有被設置成true，那麽元素需依靠某個祖先元素來渲染它。這就是很多的ie bugs誕生的地方。IE瀏覽器下的很多bug都是haslayout = false 引起的，

layout元素有以下特點：

1. 擁有布局（haslayout=true）元素不會收縮，所以可能會發生文字截斷、消失的現象；
2. 布局元素對浮動自動清理；
3. 相對定位的元素沒有布局，這可能導致絕對元素定位偏差；
4. 擁有布局的元素外邊距不疊加；
5. 滾動時，頁面會有所跳動；
6. 邊框消失
7. 像素偏差

haslayout不是一個CSS屬性，所以我們不能這樣的來設置它 haslayout:true;

一個元素被設置成haslayout：true將被渲染成一個 having haslayout，

反之同理。 一些元素本身該屬性為true，若是需要觸發，最好的方法是設置其zoom屬性； 哪些元素本身就 haslayout：true

<html>, <body><table>, <tr>, <th>, <td><iframe>, <embed> (non-standard element),

<object>, <applet> <img><hr><input>, <button>, <select>, <textarea>, <fieldset>, <legend>

zoom:1，被認為是最好的觸發Layout的方法，因為它對當前元素沒有影響。 觸發haslayout，相對來說比haslayout=false要簡單。

以下屬性和值將給定一個元素進行布局

position: absolute float: left or right display: inline-block；width: any value other than auto；

height: any value other than auto；zoom: any value other than normal (*)；writing-mode: tb-rl

最後，因為各個瀏覽器對一些元素的默認值設置不一致也會導致表現差異，比如瀏覽器默認字體，默認行高，默認間距等。所以我們一般會為幾個主要元素設置默認值。

一、document.formName.item(”itemName”) 問題

問題說明：IE下，可以使用 document.formName.item(”itemName”) 或 document.formName.elements ["elementName"]；Firefox 下，只能使用document.formName.elements["elementName"]。
解決方法：統一使用document.formName.elements["elementName"]。

二、集合類對象問題

問題說明：IE下，可以使用 () 或 [] 獲取集合類對象；Firefox下，只能使用 [ ]獲取集合類對象。
解決方法：統一使用 [] 獲取集合類對象。

三、自定義屬性問題

問題說明：IE下，可以使用獲取常規屬性的方法來獲取自定義屬性，也可以使用 getAttribute() 獲取自定義屬性；Firefox下，只能使用 getAttribute() 獲取自定義屬性。
解決方法：統一通過 getAttribute() 獲取自定義屬性。

四、eval(”idName”)問題

問題說明：IE下，可以使用 eval(”idName”) 或 getElementById(”idName”) 來取得 id 為 idName 的HTML對象；Firefox下，只能使用 getElementById(”idName”) 來取得 id 為 idName 的HTML對象。
解決方法：統一用 getElementById(”idName”) 來取得 id 為 idName 的HTML對象。

五、變量名與某HTML對象ID相同的問題

問題說明：IE下，HTML對象的ID可以作為 document 的下屬對象變量名直接使用，Firefox下則不能；Firefox下，可以使用與HTML對象ID相同的變量名，IE下則不能。
解決方法：使用 document.getElementById(”idName”) 代替 document.idName。最好不要取HTML對象ID相同的變量名，以減少錯誤；在聲明變量時，一律加上var關鍵字，以避免歧義。

六、const問題

問題說明：Firefox下，可以使用const關鍵字或var關鍵字來定義常量；IE下，只能使用var關鍵字來定義常量。
解決方法：統一使用var關鍵字來定義常量。

七、input.type屬性問題

問題說明：IE下 input.type 屬性為只讀；但是Firefox下 input.type 屬性為讀寫。
解決辦法：不修改 input.type 屬性。如果必須要修改，可以先隱藏原來的input，然後在同樣的位置再插入一個新的input元素。

八、window.event問題

問題說明：window.event 只能在IE下運行，而不能在Firefox下運行，這是因為Firefox的event只能在事件發生的現場使用。
解決方法：在事件發生的函數上加上event參數，在函數體內(假設形參為evt)使用 var myEvent = evt?evt:(window.event?window.event:null)
示例：

<input type="button" onclick="doSomething(event)"/>
<script language="javascript">
function doSomething(evt) {
var myEvent = evt?evt:(window.event?window.event:null)
...
}
九、event.x與event.y問題

問題說明：IE下，even對象有x、y屬性，但是沒有pageX、pageY屬性；Firefox下，even對象有pageX、pageY屬性，但是沒有x、y屬性。
解決方法：var myX = event.x ? event.x : event.pageX; var myY = event.y ? event.y:event.pageY;
如果考慮第8條問題，就改用myEvent代替event即可。

十、event.srcElement問題

問題說明：IE下，even對象有srcElement屬性，但是沒有target屬性；Firefox下，even對象有target屬性，但是沒有srcElement屬性。
解決方法：使用srcObj = event.srcElement ? event.srcElement : event.target;
如果考慮第8條問題，就改用myEvent代替event即可。

十一、window.location.href問題

問題說明：IE或者Firefox2.0.x下，可以使用window.location或window.location.href；Firefox1.5.x下，只能使用window.location。
解決方法：使用 window.location 來代替 window.location.href。當然也可以考慮使用 location.replace()方法。

十二、模態和非模態窗口問題

問題說明：IE下，可以通過showModalDialog和showModelessDialog打開模態和非模態窗口；Firefox下則不能。
解決方法：直接使用 window.open(pageURL,name,parameters) 方式打開新窗口。
如果需要將子窗口中的參數傳遞回父窗口，可以在子窗口中使用window.opener來訪問父窗口。如果需要父窗口控制子窗口的話，使用 var subWindow = window.open(pageURL,name,parameters); 來獲得新開的窗口對象。

十三、frame和iframe問題

以下面的frame為例：

(1)訪問frame對象
IE：使用window.frameId或者window.frameName來訪問這個frame對象；
Firefox：使用window.frameName來訪問這個frame對象；
解決方法：統一使用 window.document.getElementById(”frameId”) 來訪問這個frame對象；
(2)切換frame內容
在IE和Firefox中都可以使用 window.document.getElementById(”frameId”).src = “webjx.com.html”或 window.frameName.location = “webjx.com.html”來切換frame的內容；
如果需要將frame中的參數傳回父窗口，可以在frame中使用parent關鍵字來訪問父窗口。

十四、body載入問題

問題說明：Firefox的body對象在body標簽沒有被瀏覽器完全讀入之前就存在；而IE的body對象則必須在body標簽被瀏覽器完全讀入之後才存在。
[註] 這個問題尚未實際驗證，待驗證後再來修改。
[註] 經驗證，IE6、Opera9以及FireFox2中不存在上述問題，單純的JS腳本可以訪問在腳本之前已經載入的所有對象和元素，即使這個元素還沒有載入完成。

十五、事件委托方法

問題說明：IE下，使用 document.body.onload = inject; 其中function inject()在這之前已被實現；在Firefox下，使用 document.body.onload = inject();
解決方法：統一使用 document.body.onload=new Function(‘inject()‘); 或者 document.body.onload = function(){/* 這裏是代碼 */}
[註意] Function和function的區別

十六、訪問的父元素的區別

問題說明：在IE下，使用 obj.parentElement 或 obj.parentNode 訪問obj的父結點；在firefox下，使用 obj.parentNode 訪問obj的父結點。
解決方法：因為firefox與IE都支持DOM，因此統一使用obj.parentNode 來訪問obj的父結點。

十七、innerText的問題.

問題說明：innerText在IE中能正常工作，但是innerText在FireFox中卻不行。
解決方法：在非IE瀏覽器中使用textContent代替innerText。
示例：

if(navigator.appName.indexOf("Explorer") >-1){
document.getElementById(‘element‘).innerText = "my text";
} else{
document.getElementById(‘element‘).textContent = ";my text";
}
[註] innerHTML 同時被ie、firefox等瀏覽器支持，其他的，如outerHTML等只被ie支持，最好不用。

十八、Table操作問題

問題說明：ie、firefox以及其它瀏覽器對於 table 標簽的操作都各不相同，在ie中不允許對table和tr的innerHTML賦值，使用js增加一個tr時，使用appendChild方法也不管用。document.appendChild在往表裏插入行時FIREFOX支持，IE不支持
解決辦法：把行插入到TBODY中，不要直接插入到表
解決方法：

//向table追加一個空行：

var row = otable.insertRow(-1);
var cell = document.createElement("td");
cell.innerHTML = "";
cell.className = "XXXX";
row.appendChild(cell);
[註] 建議使用JS框架集來操作table，如JQuery。

十九、對象寬高賦值問題

問題說明：FireFox中類似 obj.style.height = imgObj.height 的語句無效。
解決方法：統一使用 obj.style.height = imgObj.height + ‘px‘;

二十、setAttribute(‘style‘,‘color:red;‘)
FIREFOX支持(除了IE，現在所有瀏覽器都支持)，IE不支持
解決辦法：不用setAttribute(‘style‘,‘color:red‘)
而用object.style.cssText = ‘color:red;‘(這寫法也有例外)
最好的辦法是上面種方法都用上，萬無一失

二一、類名設置
setAttribute(‘class‘,‘styleClass‘)
FIREFOX支持，IE不支持(指定屬性名為class，IE不會設置元素的class屬性，相反只使用setAttribute時IE自動識CLASSNAME屬性)
解決辦法：
setAttribute(‘class‘,‘styleClass‘)

setAttribute(‘className‘,‘styleClass‘)

或者直接 object.className=‘styleClass‘;

IE和FF都支持object.className。

二二、用setAttribute設置事件
var obj = document.getElementById(‘objId‘);
obj.setAttribute(‘onclick‘,‘funcitonname();‘);
FIREFOX支持，IE不支持
解決辦法：
IE中必須用點記法來引用所需的事件處理程序,並且要用賦予匿名函數
如下：
var obj = document.getElementById(‘objId‘);
obj.onclick=function(){fucntionname();};
這種方法所有瀏覽器都支持

二三、建立單選鈕
IE以外的瀏覽器
var rdo = document.createElement(‘input‘);
rdo.setAttribute(‘type‘,‘radio‘);
rdo.setAttribute(‘name‘,‘radiobtn‘);
rdo.setAttribute(‘value‘,‘checked‘);

IE:
var rdo =document.createElement(”<input name=”radiobtn” type=”radio” value=”checked” />”);
解決辦法：
這一點區別和前面的都不一樣。這次完全不同，所以找不到共同的辦法來解決，那麽只有IF-ELSE了
萬幸的是，IE可以識別出document的uniqueID屬性，別的瀏覽器都不可以識別出這一屬性。問題解決

js和css兼容問題