Javascript相容性問題小結(容易導致瀏覽器不同，又不容易察覺的)

1. img的src重新整理問題
【分析說明】先看一下代碼：

<img id="pic" onclick= "this.src= 'a.jpg'"
  src="aa.jpg" style="cursor: pointer"/>
在IE 下，這段代碼可以用來重新整理圖片，但在FireFox下不行。主要是緩衝問題。
【相容處理】在地址後面加個隨機數就解決了:

<img id="pic" onclick= "javascript:this.src=this.src+'?'
　　　　　+Math.random()"src="a.jpg" style="cursor: pointer"/>

2.nodeName 和 tagName 問題
在Firefox中，所有節點均有 nodeName 值，但 textNode 沒有 tagName 值。
在 IE中nodeName 的使用有時會有問題。
解決方案：
使用 tagName，但應檢測其是否為空白。

3.布局問題
當 你在寫css的時候，特別是用float: left（或right）排列一竄圖片時，會發現在firefox裡面正常而IE裡面有問題。無論你用margin:0,還是border: 0來約束，都無濟於事。
其實這裡還有另外一個問題，就是IE對於空格的處理，firefox是忽略的而IE對於塊與塊之間的空格是處理的。也就 是說一個div結束後要緊 接著一個div寫，中間不要有斷行符號或者

空格。不然也許會有問題，比如3px的偏差，而且這個原因很難發現。
非常不走 運的是我又碰到了這樣的問題，多個img標籤連著，然後定義的float: left，希望這些圖片可以連起來。但是結果在firefox裡面正常而IE裡面顯示的每個img都相隔了

3px。我把標籤之間的空格都刪除都沒有作用。
後來的解決方案是在img外面套li，並且對li定義margin: 0，這樣就解決了IE和firefox的顯示偏差。IE對於一些模型的解釋會產生很多錯誤問題，只有多多嘗試才能發現原因。
這隻是一些簡單的區 別,在做布局和CSS設計時候可以綜合考慮,但最為有效與簡單的解決相容問題還是用TABLE表格,表格在相容性方面有著不錯 的表現.

4.padding、margin
padding 和margin值盡量不要縮寫。最近看了一兩篇文章，居然說有可能不相容，其實我自己從來沒有遇到它們
不相容的情況，以防萬一，還是盡量不縮寫好了。

5. 鍵盤值的取得
【分析說明】IE和Firefox擷取鍵盤值的方法不同，可以理 解，Firefox下的event.which與IE下的 event.keyCode相當。關於彼此不同，可參考《鍵盤事件中 keyCode、which和

charCode 的相容性測試》
【相容處理】

function myKeyPress(evt){
//相容IE和Firefox獲得keyBoardEvent對象
evt = (evt) ? evt : ((window.event) ? window.event : "")
  //相容IE和Firefox獲得 keyBoardEvent對象的索引值
var key = evt.keyCode?evt.keyCode:evt.which;
if(evt.ctrlKey && (key == 13 || key == 10)){
 　　　　　　//同步選取了Ctrl和斷行符號鍵
//do something;
}
}

6. Firefox不能對innerText支援
【分析說明】Firefox不支援innerText，它支援textContent來實現 innerText，不過textContent沒有像 innerText一樣考慮元素的display方式，所以不完全與IE相容。如果不用

textContent，字串裡面不包含HTML代碼也可以用 innerHTML代替。也可以用js寫個方法實現，可參考《為firefox實現innerText屬性》一文。
【相容處理】通過判斷瀏覽器類型來相容：

if(document.all){
document.getElementById('element').innerText = "my text";
} else{
document.getElementById('element').textContent = "my text";
}

7.訪問和設定class屬性
【分析說明】同樣由於class是Javascript保留字的原因，這兩種瀏覽器使用不同的 JavaScript 方法來擷取這個屬性。
IE8.0之前的所有IE版本的寫法：
myObject.getAttribute("className");
而IE8.0 以及 firefox的寫法：
myObject.getAttribute("class");
　 　另外，在使用setAttribute()設定Class屬性的時候，兩種瀏覽器也存在同樣的差異。
　　 setAttribute("className",value);
　　這種寫法適用於IE8.0之前的所有IE版本，注意：IE8.0也 不支援"className"屬性了。
　　setAttribute("class",value);適用於IE8.0 以及 firefox。
【相容處理】
方法一，兩種都寫上：

var myObject = document.getElementById("header");
myObject.setAttribute("class","classValue");
myObject.setAttribute("className","classValue");
 //設定header的class為 classValue
方法二，IE和FF都支援object.className，所以可以這樣寫：

myObject.className="classValue";
方法 三，先判斷瀏覽器類型，再根據瀏覽器類型採用對應的寫法。