前端瀏覽器JavaScript及CSS相容總結
一、 getElementById
【標準參考】
getElementById 是Document 介面提供的方法，用於獲取一個
getElementById 是Document 介面提供的方法，用於獲取一個元素，該方法傳入的元素應該是目標元素的參數應該是目標介面id 屬性的值，目標元素的id 是一個大小寫敏感的字串，而該id 在文件內應該是唯一的。
【問題描述】
但是在IE6 IE7 IE8(Q) 中，支援以document.getElementById(elementName) 的方式取得name 屬性值為elementName 的A APPLET BUTTON FORM IFRAME IMG INPUT MAPMB NPUT且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 事件；
所有瀏覽器支援window和普通DIV物件的scroll 事件；
所有瀏覽器支援window和普通DIV物件的scroll 事件；中，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('
修改後：
(var iframe">')
修改後：
(var iframe =d. ? document.createElement('
iframe.name = "iframe";
五、DOM 物件的outerHTML、innerText、outerHT innerText、outerHTML、innerText、outerHTML、innerText
【標準參考】
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"); );
eventTarget.dispatchEvent(evt);
}else if(eventTarget.fireEvent){
eventTarget.fireEvent('on'+eventName);
}else{
}
}catch(e){
alert(e);
}
}
createEvent(HTMLElement,'click');為了相容於各瀏覽器，而使用的特別的css定義技巧。 （註：不是迫不得已，應該盡量不要使用css hack，因為它的向前兼容是未知的。好的辦法是學好web標準設計，從根本上進行進行兼容性設計。）下表我是結合許多資料和實作用html程式碼寫的表格，方便擴充更新，但文件中不好顯示，故分為兩次截圖：
先來個簡單的區分IE瀏覽器和其他瀏覽器的例子： color:red; (所有瀏覽器支援) color:red9; (IE皆支援) color:red
