下面小編就為大家分享一篇總結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 wheel detlaY 下3 上-3
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的事件
並且除非我們記錄了我們綁定的事件，否則我們沒辦法解綁他們。
上面是我整理給大家的，希望今後對大家有幫助。
相關文章：
在Parcel.js Vue 2.x中如何做到極速零配置打包
使用Vue時瀏覽器後退無法觸發beforeRouteLeave的問題
#以上是在js中容易出現的兼容性易錯問題的詳細內容。更多資訊請關注PHP中文網其他相關文章！
