前端瀏覽器JavaScript及CSS相容總結

標籤：前端瀏覽器javascript及css相容總結

前端瀏覽器JavaScript及CSS相容總結

一、 getElementById

【標準參考】

getElementById 是 Document 介面提供的方法，用於擷取一個元素，該方法傳入的參數應該是目標元素的 id 屬性的值，目標元素的 id 是一個大小寫敏感的字串，並且該 id 在文檔內應該是唯一的。

【問題描述】

但是在 IE6 IE7 IE8(Q) 中，支援以 document.getElementById(elementName) 的方式擷取 name 屬性值為 elementName 的 A APPLET BUTTON FORM IFRAME IMG INPUT MAP META OBJECT EMBED SELECT TEXTAREA 元素，且id 是大小寫不敏感的。

【造成影響】

該問題將導致在非IE瀏覽器內無法擷取到目標元素。

【解決方案】

在使用 document.getElementById 方法擷取頁面元素時，應傳入元素的 id 屬性值，而不能使用元素的 name 屬性值，且嚴格區分大小寫。同時需注意頁面中的元素的 id 屬性值不能與其他元素的 name 屬性值有重複。

另外，與getElementById 一樣，標準的getElementsByName是區分大小寫，但是在IE下卻不區分，所以我們使用時最好嚴格區分大小寫。

二、 IE 在建立 DOM 樹時會忽略某些空白字元

【標準參考】

Node（節點）不僅包括元素節點，也包含文本節點、注釋節點、屬性節點等等，節點的類型可以使用 nodeType 來區分。

在 HTML 原始碼中，位於標籤之內以及標籤之間的文本（包括空白字元）將被建立為文本節點。

【問題描述】

IE 在建立 DOM 樹時，會忽略某些空白字元，因此會比其他瀏覽器少建立一些文本節點。反過來說，同樣的一篇文檔，其他瀏覽器將比 IE 多建立一些文本節點。

【造成影響】

使用者針對 IE 設計的指令碼如果使用節點對象的 nodeList、firstChild、lastChild、previousSibling 或 nextSibling 方法，可能會因為此問題而無法在其他瀏覽器中達到相同的目的，如指令碼執行出錯，或對錯誤的目標對象進行了操作。

【解決方案】

1、沒有必要時盡量去掉各標籤之間的空白字元。

因為頁面指令碼多是對“元素節點”進行操作，因此只要保證各元素之間沒有文本節點（即原始碼中的標籤之間沒有空白字元——包括空格符、分行符號、定位字元），就能使上述各屬性在各瀏覽器中的行為一致。

另外，使用指令碼建立並順次添加的元素，他們本身就是緊密相聯的，各元素之間並沒有文本節點，因此這種情況也不必擔心上述相容性問題，如：

2、在擷取節點時做類型判斷。

無法保證各元素之間沒有文本節點時，則需要在針對節點的操作上添加類型判斷。

另外，在非IE中，還可以使用previousElementSibling 和 nextElementSibling 擷取元素節點，例如：以 Element.nextElementSibling 取得與元素 Element 的相鄰的下一個元素節點。

三、document、document.body、document.documentElement對象的onscroll事件差異

【標準參考】

scroll 事件會在文檔或一個元素滾動時觸發。

【問題描述】

各瀏覽器對於 document、document.body、document.documentElement 對象的 onscroll 事件的支援存在差異

所有瀏覽器支援 window和普通DIV對象的 scroll 事件；

在IE、Opera 中，document和document.body 對象支援 scroll 事件。其他瀏覽器中不支援；

在 IE中，document.documentElement 對象支援 scroll 事件。其他瀏覽器中不支援。

【造成影響】

為 document、document.body、document.documentElement 對象綁定 onscroll 事件後在不同瀏覽器中可能不會按預期觸發相應的事件處理函數。

【解決方案】

在給整個瀏覽器視窗綁定滾動事件 (scroll) 的時候，綁定到 window 對象上。

四、僅 IE 中的 createElement 方法支援傳入 HTML String 做參數

【標準參考】

根據 W3C DOM Level2 Core 規範中的描述，Document 介面下的 createElement 方法可以建立一個元素節點對象執行個體。它可以傳入一個字串參數 tagName，在 HTML 中，這個參數可以是任何形式，必須是映射到可由 DOM 實現的符合規範的大寫形式。即，tagName 應為一個合法的標籤名。若 tagName 中出現不合法的字元，則應拋出 INVALID_CHARACTER_ERR 異常。

【問題描述】

在 IE6 IE7 IE8 中，createElement 方法不僅可以通過合法的標籤名建立節點對象，還可以通過傳入一段合法的 HTML 程式碼字串作為參數建立節點對象。

【造成影響】

若使用了 IE 特有的通過為 createElement 傳入一段合法的 HTML 程式碼字串作為參數建立節點對象的方法，則在其他瀏覽器中將會拋出異常，並導致後續代碼無法執行。

【解決方案】

對於一般的非替換元素，在各瀏覽器中均使用 W3C 規範中的標準的為 createElement 方法傳入標籤名的做法。

對於一些 IE 處理有問題的替換元素，則注意判斷瀏覽器，針對 IE 使用其特有的通過為 createElement 傳入一段合法的 HTML 程式碼字串作為參數的方法，非 IE 瀏覽器仍然使用 W3C 規範的標準方法，例如：

不相容代碼，僅IE支援：

Var iframe = document.createElement(‘<iframe name="iframe">‘)

修改後：

var iframe = (document.all) ? document.createElement(‘<iframe name="iframe">‘) : document.createElement(‘iframe‘);

iframe.name = "iframe";

五、DOM 對象的 outerHTML、innerText、outerText 屬性

【標準參考】

outerHTML 最初是由 IE 瀏覽器實現的私人屬性，詳細內容請參見 MSDN 說明：outerHTML Property。

W3C 的 HTML5 規範草案中也新加入了這個屬性，它描述的是元素本身以及它的內容。當用一個字串設定 DOM 元素的這個屬性時，字串會被當作 HTML 程式碼來渲染並替換這個 DOM 元素。

目前，主流瀏覽器中，只有 Firefox 不支援 outerHTML 屬性。

【問題描述】

Firefox 不支援 DOM 對象的 outerHTML、innerText、outerText 屬性

【造成影響】

在 Firefox 中使用 outerHTML、innerText、outerText 屬性會使指令碼程式報錯。

【解決方案】

暫無，應盡量避免使用。

六、IE6 IE7 IE8 Opera 支援除 INPUT 和 BUTTON 元素以外的其他元素的 ‘click‘ 方法

【標準參考】

"click" 方法用於類比一個滑鼠點擊事件，可應用於 "type" 屬性值為 "button" "checkbox" "radio" "reset" "submit" 的 INPUT 元素上，其他元素的 "click" 方法規範中並沒有提及。

【問題描述】

IE6 IE7 IE8 Opera 支援除 INPUT 和 BUTTON 元素以外的其他元素的 "click" 方法，這使得各瀏覽器對除 INPUT 和 BUTTON 元素以外的其他元素的 "click" 的支援情況存在差異。

【造成影響】

由於各瀏覽器對除 INPUT 和 BUTTON 元素以外的其他元素的 "click" 方法的支援情況存在差異，將導致除 INPUT 和 BUTTON 元素以外的其他元素的 "click" 方法類比的滑鼠點擊所觸發的函數在某些瀏覽器中不能得到響應。

【解決方案】

建議盡量避免對除 INPUT 和 BUTTON 元素以外的其他元素通過 "click" 方法類比滑鼠點擊事件。

如需對其元素使用 "click" 方法觸發 "onClick" 事件處理常式，可以通過以下兩種方式解決：

* 由於大多數情況下調用 "click" 方法所實現的無非是執行某一元素所綁定的事件處理函數，因此可以直接調用該元素所對應的 "click" 事件處理函數。

* 或者使用 DOM-Level-2-Events 標準內 DocumentEvent interface 、Event interface 和 Event registration interfaces 相關定義中的 "createEvent" " initEvent" 以及 "dispatchEvent"方法建立 "click" 事件並派發出去。如：

function createEvent (eventTarget,eventName){

try{

if(eventTarget.dispatchEvent){

var evt = document.createEvent("MouseEvents");

evt.initEvent(eventName,false,true);

eventTarget.dispatchEvent(evt);

}else if(eventTarget.fireEvent){

eventTarget.fireEvent(‘on‘+eventName);

}else{

eventTarget[ type ]();

}

}catch(e){

alert(e);

}

}

createEvent(HTMLElement,‘click‘);

八、CSS hack的相容總結

CSS hack是指我們為了相容各瀏覽器，而使用的特別的css定義技巧。（註：不是迫不得已，應該盡量不要使用css hack，因為它的向前相容是未知的。好的辦法是學好web標準設計，從根本上進行進行相容性設計。）下表我是結合許多資料和實踐用html代碼編寫的表格，方便擴充和更新，但文檔中不好顯示，故分為兩次：

先來個簡單的區分IE瀏覽器和其他瀏覽器的例子： color:red; (所有瀏覽器支援) color:red\9; (IE均支援) color:red\0; (IE8支援) *color:red; (IE6/IE7支援) *+color:red; (IE7支援) _color:red; (IE6支援)

前端瀏覽器JavaScript及CSS相容總結