總結(jié)js中的一些兼容性易錯(cuò)的問(wèn)題

一、屬性相關(guān)

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

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

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

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

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

2. IE6/7不能通過(guò)getAttribute/setAttribute來(lái)操作值不為字符串的特征

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

3. IE6/7/8不能通過(guò)style屬性來(lái)獲取CSS文本

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

4. IE6/7會(huì)解析相對(duì)URL成為絕對(duì)URL

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

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

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

二、樣式操作

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

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

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

2. IE6/7不支持opacity屬性

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

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

比如background，修改一個(gè)兩個(gè)同時(shí)會(huì)改。

4. 不同的獲取計(jì)算出樣式的方式

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

5.不同的像素化方式

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

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

6. 一些獲取CSS時(shí)的BUG行為

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

三、查詢操作

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

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

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

2. IE6/7不支持getElementsByClassName和querySelectorAll

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

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

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

4. IE8下querySelectorAll對(duì)屬性選擇器不友好

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

5. IE8下querySelectorAll不支持偽類

有時(shí)候偽類是很好用，IE8并不支持，jquery提供的:first、:last、:even、:odd、:eq、:nth、:lt、:gt并不是偽類，我們?cè)谌魏螘r(shí)間都不要使用它們。

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

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

四. 事件操作

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

1. 事件作用對(duì)象不同

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

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

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

2. 萬(wàn)惡的滾輪事件

滾輪事件的支持可謂是亂七八糟，規(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事件都不冒泡，萬(wàn)幸的是大部分瀏覽器支持focusin/focusout事件，不過(guò)可惡的firefox連這個(gè)都不支持。

IE678下submit事件不冒泡。

IE678下change事件要等到blur時(shí)才觸發(fā)。

而我們沒(méi)有什么有效的手段去解決這三個(gè)問(wèn)題，只能通過(guò)模擬觸發(fā)的方式來(lái)處理。

4. a.click()

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

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

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

1.. innerHTML

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

2. 無(wú)用的tbody

IE6/7/8會(huì)給空的table自動(dòng)加一個(gè)空的tbody

3. cloneNode時(shí)會(huì)復(fù)制attachEvent的事件

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

以上這篇總結(jié)js中的一些兼容性易錯(cuò)的問(wèn)題就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持億速云。