關於js相容問題我們也遇到很多，本文就為大家分享一篇總結js中的一些兼容性易錯的問題，具有很好的參考價值，希望對大家有所幫助，希望能幫助到大家。
一、屬性相關
我們通常把特徵(attribute)和屬性(property)統稱為屬性，但是他們確實是不同的概念，
特徵(attribute)會表現在HTML文字中，特徵的修改一定會表現在元素的outerHTML中，且特徵只存在於元素節點中；
#屬性(property)是對於JS物件進行修改，除了瀏覽器內建的部分特徵外，其它的屬性操作並不會影響HTML文字。
1. IE6/7不區分屬性和特徵
其它瀏覽器會區分屬性和特徵，而IE67並不會區分它們，在IE67下我們只能用屬性名來刪除特徵，雖然這兩個名字很多時候一樣，但總是會有不一樣的地方。
2. IE6/7不能透過getAttribute/setAttribute來操作值不為字串的特徵
在現代瀏覽器中getAttribute一定會傳回HTML中對應的字串，而IE67返回的結果不可預知，因此在IE67下，我們要用AttributeNode來操作屬性。
3. IE6/7/8不能透過style屬性來取得CSS文字
這個問題應該是IE6/7不區分屬性和特徵的後遺症，在取得style這個屬性的時候，使用elem.style.cssText就好了。
4. IE6/7會解析相對URL成為絕對URL
這個問題甚至導致了IE6/7下空的src屬性會產生重複的請求，可以使用getAttribute('href/ src', 4)。
5. 元素特徵的預設行為不同
這一類的BUG會比較多，例如在一些舊的webkit瀏覽器裡面，checkbox/radio 的預設值為""，而不是on。在一些舊的webkit瀏覽器select的第一個元素不會被選取。
二、樣式運算
通常情況下，樣式包括取得和設定行內樣式以及取得元素的計算出的樣式
1. IE支援background-position-x /y而其它瀏覽器不支援
background-position-x/y可以用來方便的漸層一個圖片的位置，不支援的情況下我們可以考慮使用解析background-position屬性的來處理。
2. IE6/7不支援opacity屬性
可以透過alpha濾鏡來達到相同的效果，不過要記得觸發元素的haslayout。
3. IE6/7/8會錯誤的讓clone產生的節點繼承一些屬性
例如background，修改一個兩個同時會改變。
4. 不同的取得計算出樣式的方式
IE6/7/8使用elem.currentStyle而其它瀏覽器要用window.getComputedStyle函數。
5.不同的像素化方式
像素化指的是將單位不是像素的距離轉換成像素，以便進行計算。嚴格的說這不是相容性問題，但可能全用到。在IE6/7/8中，我們可以使用elem.runtimeStyle來配合pixelLeft來處理。
而現代瀏覽器可以使用width屬性處理。
6. 一些取得CSS時的BUG行為
在Webkti核心的瀏覽器中，margin-right常常會出錯。
三、查詢操作
查詢透過指的是透過一些特徵字串來找出一組元素，或是判斷元素是否滿足字串。
1. IE6/7不區分id和name
在IE6/7下使用getElementById和getElementsByName時會同時傳回id或name與給定值相同的元素。由於name通常由後端約定，因此我們在寫JS時，應保證id不與name重複。
2. IE6/7不支援getElementsByClassName和querySelectorAll
這兩個函數從IE8開始支援的，因此在IE6/7下，我們實際可以使用的只有getElementByTagName。
3. IE6/7不支援getElementsByTagName('*')會傳回非元素節點
要嘛不用*，要嘛自己寫個函數過濾一下。
4. IE8下querySelectorAll對屬性選擇器不友善
幾乎所有瀏覽器預先定義的屬性都有了問題，盡量使用自訂屬性或不用屬性選擇器。
5. IE8下querySelectorAll不支援偽類
有時候偽類是很好用，IE8不支持，jquery提供的:first、:last、:even、:odd、 :eq、:nth、:lt、:gt並不是偽類，我們在任何時間都不要使用它們。
6. IE9的matches函數不能處理不在DOM樹上的元素
只要元素不在dom樹上，一定會回傳false，實在不行把元素丟在body裡面配對完了再刪掉吧，當然了我們也可以自己寫匹配函數以避免回流。
四. 事件操作
通常一問大家JS的兼容性，第一個反應都會是attachEvent和addEventListener，但是關於這兩個函數的區別，也還是有很多的細節。
1. 事件作用對像不同
addEventListener為事件冒泡到的目前對象，而attachEvent是window。
. 事件參數物件不同
一定要注意，attachEvent綁定的函數有參數e，不要再寫e = e || event了，不過兩者的參數屬性有很多的差別，如button還是witch，支援不支援pageY等等。
2. 萬惡的滾輪事件
滾輪事件的支援可謂是亂七八糟，規則如下：
IE6-11 chrome mousewheel wheelDetla 下-120 上120
#firefox DOMMouseScroll detail 下3 上-3
##firefox DOMMouseScroll detail 下3 上-3
##firefox wheel##firefox wheel# detlaY 下3 上-3
IE9-11 wheel deltaY 下40 上-40
#IE9-11 wheel deltaY 下40 上-40
chrome wheel deltaY 下100 上-100
#3. 三大不冒泡事件
所有瀏覽器的focus/blur事件都不冒泡，萬幸的是大部分瀏覽器支援focusin/focusout事件，不過可惡的firefox連這個都不支援。
IE678下submit事件不冒泡。
IE678下change事件要等到blur時才觸發。
而我們沒有什麼有效的手段去解決這三個問題，只能透過模擬觸發的方式來處理。
4. a.click()
這方法在許多瀏覽器下都不安全，一執行就算阻止了預設行為，還是會造成頁面跳躍。
五、節點操作
節點操作通常指的是複製、產生一個節點或移動節點的位置。
1.. innerHTML
IE6/7/8使用innerHTML時必須在前面有一個文字節點，不然會造成很多標籤遺失。另外很多情況下使用innerHTML會造成defaultValue屬性出錯。
2. 無用的tbody
IE6/7/8會給空的table自動加上空的tbody
3. cloneNode時會複製attachEvent的事件
並且除非我們記錄了我們綁定的事件，否則我們沒辦法解綁他們。
相關推薦：
html和css中常見的瀏覽器相容性問題
JavaScript中關於相容性能的具體分析
#########JavaScript字串操作方法和瀏覽器相容性實例詳解######
以上是一些js中兼容性易錯問題的總結的詳細內容。更多資訊請關注PHP中文網其他相關文章！
