首頁 > 文章 > web前端 > 一些js中兼容性易錯問題的總結

一些js中兼容性易錯問題的總結

小云云原創: 2017-12-18 11:26:031403瀏覽

關於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的事件

並且除非我們記錄了我們綁定的事件，否則我們沒辦法解綁他們。

一些js中兼容性易錯問題的總結

相關文章