一、屬性相關(guān)

我們通常把特征(attribute)和屬性(property)統(tǒng)稱為屬性，但是他們確實(shí)是不同的概念，

特征(attribute)會表現(xiàn)在HTML文本中，對特征的修改一定會表現(xiàn)在元素的outerHTML中，并且特征只存在于元素節(jié)點(diǎn)中；

屬性(property)是對于JS對象進(jìn)行修改，除了瀏覽器內(nèi)置的部分特征外，其它的屬性操作并不會影響HTML文本。

1. IE6/7不區(qū)分屬性和特征

其它瀏覽器會區(qū)分屬性和特征，而IE67并不會區(qū)分它們，在IE67下我們只能用屬性名來刪除特征，雖然這兩個名字很多時候一樣，但總會有不一樣的地方。

2. IE6/7不能通過getAttribute/setAttribute來操作值不為字符串的特征

在現(xiàn)代瀏覽器中g(shù)etAttribute一定會返回HTML中對應(yīng)的字符串，而IE67返回的結(jié)果不可預(yù)知，因此在IE67下，我們要用AttributeNode來操作屬性。

3. IE6/7/8不能通過style屬性來獲取CSS文本

這個問題應(yīng)當(dāng)是IE6/7不區(qū)分屬性和特征的后遺癥，在獲取style這個屬性的時候，使用elem.style.cssText就好了。

4. IE6/7會解析相對URL成為絕對URL

這個問題甚至導(dǎo)致了IE6/7下空的src屬性會產(chǎn)生重復(fù)的請求，可以使用getAttribute('href/src', 4)。

5. 元素特征的默認(rèn)行為不同

這一類的BUG會比較多，比如在一些舊的webkit瀏覽器里面，checkbox/radio 的默認(rèn)值為""，而不是on。在一些舊的webkit瀏覽器select的第一個元素不會被選中。

二、樣式操作

通常情況下，樣式包括獲取和設(shè)置行內(nèi)樣式以及獲取元素的計算出的樣式

1. IE支持background-position-x/y而其它瀏覽器不支持

background-position-x/y可以用來方便的漸變一個圖片的位置，不支持的情況下我們可以考慮使用解析background-position屬性的來處理。

2. IE6/7不支持opacity屬性

可以通過alpha濾鏡來實(shí)現(xiàn)相同的效果，不過要記得觸發(fā)元素的haslayout。

3. IE6/7/8會錯誤的讓clone產(chǎn)生的節(jié)點(diǎn)繼承一些屬性

比如background，修改一個兩個同時會改。

4. 不同的獲取計算出樣式的方式

IE6/7/8使用elem.currentStyle而其它瀏覽器要用window.getComputedStyle函數(shù)。

5.不同的像素化方式

像素化指的是將單位不是像素的距離轉(zhuǎn)換成像素，以方便進(jìn)行計算。嚴(yán)格的說這不是一個兼容性問題，但可能全用到。在IE6/7/8中，我們可以使用elem.runtimeStyle配合pixelLeft來進(jìn)行處理。

而現(xiàn)代瀏覽器可以使用width屬性處理。

6. 一些獲取CSS時的BUG行為

在Webkti核心的瀏覽器中，margin-right經(jīng)常會出錯。

三、查詢操作

查詢通過指的是通過一些特征字符串來找到一組元素，或者判斷元素是不是滿足字符串。

1. IE6/7不區(qū)分id和name

在IE6/7下使用getElementById和getElementsByName時會同時返回id或name與給定值相同的元素。由于name通常由后端約定，因此我們在寫JS時，應(yīng)保證id不與name重復(fù)。

2. IE6/7不支持getElementsByClassName和querySelectorAll

這兩個函數(shù)從IE8開始支持的，因此在IE6/7下，我們實(shí)際可以用的只有g(shù)etElementByTagName。

3. IE6/7不支持getElementsByTagName('*')會返回非元素節(jié)點(diǎn)

要么不用*，要么自己寫個函數(shù)過濾一下。

4. IE8下querySelectorAll對屬性選擇器不友好

幾乎所有瀏覽器預(yù)定義的屬性都有了問題，盡量使用自定義屬性或者不用屬性選擇器。

5. IE8下querySelectorAll不支持偽類

有時候偽類是很好用，IE8并不支持，jquery提供的:first、:last、:even、:odd、:eq、:nth、:lt、:gt并不是偽類，我們在任何時間都不要使用它們。

6. IE9的matches函數(shù)不能處理不在DOM樹上的元素

只要元素不在dom樹上，一定會返回false，實(shí)在不行把元素丟在body里面匹配完了再刪掉吧，當(dāng)然了我們也可以自己寫匹配函數(shù)以避免回流。

四. 事件操作

通常一問大家JS的兼容性，第一反應(yīng)都會是attachEvent和addEventListener，但是關(guān)于這兩個函數(shù)的區(qū)別，也還是有很多的細(xì)節(jié)。

1. 事件作用對象不同

addEventListener為事件冒泡到的當(dāng)前對象，而attachEvent是window。

. 事件參數(shù)對象不同

一定要注意，attachEvent綁定的函數(shù)有參數(shù)e，不要再寫e = e || event了，不過兩者的參數(shù)屬性有很多的差別，如button還是witch，支持不支持pageY等等。

2. 萬惡的滾輪事件

滾輪事件的支持可謂是亂七八糟，規(guī)律如下：
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時才觸發(fā)。

而我們沒有什么有效的手段去解決這三個問題，只能通過模擬觸發(fā)的方式來處理。

4. a.click()

這方法在很多瀏覽器下都不安全，一執(zhí)行哪怕阻止了默認(rèn)行為，還是會造成頁面跳轉(zhuǎn)。

五、節(jié)點(diǎn)操作

節(jié)點(diǎn)操作通常指的是復(fù)制、生成一個節(jié)點(diǎn)或者移動節(jié)點(diǎn)的位置。

1.. innerHTML

IE6/7/8使用innerHTML時必須在前面有一個文本節(jié)點(diǎn)，不然會造成很多標(biāo)簽丟失。另外很多情況下使用innerHTML會造成defaultValue屬性出錯。

2. 無用的tbody

IE6/7/8會給空的table自動加一個空的tbody

3. cloneNode時會復(fù)制attachEvent的事件

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

以上這篇總結(jié)js中的一些兼容性易錯的問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論