JavaScript在IE和FF下的兼容性問題

作者：Eve Cole 更新時間：2025-08-15 18:48:02

長久以來JavaScript兼容性一直是Web開發者的一個主要問題。在正式規範、事實標準以及各種實現之間的存在的差異讓許多開發者日夜煎熬。為此，主要從以下幾方面差異總結IE和Firefox的Javascript兼容性:

複製代碼代碼如下:

一、函數和方法差異；

二、樣式訪問和設置；

三、DOM方法及對象引用；

四、事件處理；

五、其他差異的兼容處理。

一、函數和方法差異

1. getYear()方法

【分析說明】先看一下以下代碼：

複製代碼代碼如下:

var year= new Date().getYear();

document.write(year);

在IE中得到的日期是"2010"，在Firefox中看到的日期是"110"，主要是因為在Firefox 裡面getYear 返回的是"當前年份-1900" 的值。

【兼容處理】加上對年份的判斷，如:

複製代碼代碼如下:

var year= new Date().getYear();

year = (year<1900?(1900+year):year);

document.write(year);

也可以通過getFullYear getUTCFullYear 去調用:

複製代碼代碼如下:

var year = new Date().getFullYear();

document.write(year);

2. eval()函數

【分析說明】在IE中，可以使用eval("idName")或getElementById("idName")來取得id為idName的HTML對象；Firefox下只能使用getElementById("idName")來取得id為idName的HTML對象。

【兼容處理】統一用getElementById("idName")來取得id為idName的HTML對象。

3. const聲明

【分析說明】在IE 中不能使用const 關鍵字。如：

複製代碼代碼如下:

const constVar = 32;

在IE中這是語法錯誤。

【兼容處理】不使用const ，以var 代替。

4. var

【分析說明】請看以下代碼：

複製代碼代碼如下:

echo=function(str){

document.write(str);

}

這個函數在IE上運行正常，Firefox下卻報錯了。

【兼容處理】而在echo前加上var就正常了，這個就是我們提到var的目的。

5. const 問題

【分析說明】在IE 中不能使用const 關鍵字。如const constVar = 32; 在IE中這是語法錯誤。

【解決方法】不使用const ，以var 代替。

二、樣式訪問和設置

1. CSS的"float"屬性

【分析說明】Javascript訪問一個給定CSS 值的最基本句法是：object.style.property，但部分CSS屬性跟Javascript中的保留字命名相同，如"float"，"for"，"class"等，不同瀏覽器寫法不同。

在IE中這樣寫：

複製代碼代碼如下:

document.getElementById("header").style.styleFloat = "left";

在Firefox中這樣寫：

複製代碼代碼如下:

document.getElementById("header").style.cssFloat = "left";

【兼容處理】在寫之前加一個判斷，判斷瀏覽器是否是IE：

複製代碼代碼如下:

if(document.all){ //

document.getElementById("header").style.styleFloat = "left";

}

else{ //非ie 時為undefined

document.getElementById("header").style.cssFloat = "left";

}

2. 訪問<label>標籤中的"for"

【分析說明】和"float"屬性一樣，同樣需要使用不現的句法區分來訪問<label>標籤中的"for"。

在IE中這樣寫：

複製代碼代碼如下:

var myObject = document.getElementById("myLabel");

var myAttribute = myObject.getAttribute("htmlFor");

在Firefox中這樣寫：

複製代碼代碼如下:

var myObject = document.getElementById("myLabel");

var myAttribute = myObject.getAttribute("for");

【兼容處理】解決的方法也是先判斷瀏覽器類型。

3. 訪問和設置class屬性

【分析說明】同樣由於class是Javascript保留字的原因，這兩種瀏覽器使用不同的JavaScript 方法來獲取這個屬性。

IE8.0之前的所有IE版本的寫法：

複製代碼代碼如下:

var myObject = document.getElementById("header");

var myAttribute = myObject.getAttribute("className");

適用於IE8.0 以及firefox的寫法：

複製代碼代碼如下:

var myObject = document.getElementById("header");

var myAttribute = 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，所以可以這樣寫：

複製代碼代碼如下:

var myObject = document.getElementById("header");

myObject.className="classValue";//設置header的class為classValue

方法三，先判斷瀏覽器類型，再根據瀏覽器類型採用對應的寫法。

4. 對象寬高賦值問題

【分析說明】FireFox中類似obj.style.height = imgObj.height 的語句無效。

【兼容處理】統一使用obj.style.height = imgObj.height + 'px';

5.添加樣式

【分析說明】IE中使用addRules()方法添加樣式，如：styleSheet.addRule("p","color:#ccc",styleSheet.length).而該方法不兼容FF，在FF使用insetRule()方法替換。如styleSheet.insertRule("p{color:#ccc}",styleSheet.length).

【兼容處理】

複製代碼代碼如下:

if(styleSheet.insertRule){

//insertRule()方法

}else{

//addRule()方法

}

6.最終樣式

【分析說明】有時候我們自定義的樣式會失效，是因為發生了樣式的重疊，如一個類選擇符定義的樣式和一個標籤選擇符定義的樣式，此時後者失效。則此時需要用到最終樣式了。 IE中最終樣式的寫法是ele.currentStyle.屬性名。 DOM中標準寫法是利用document.defaultView對象，如document.defaultView.getComputedStyle(elel,null),該方法兼容FF.

【兼容處理】先判斷瀏覽器(document.all)，再執行上面的方法.

三、DOM方法及對象引用

1. getElementById

【分析說明】先來看一組代碼：

複製代碼代碼如下:

<input id="id" type="button"

value="click me" ōnclick="alert(id.value)"/>

在Firefox中，按鈕沒反應，在IE中，就可以，因為對於IE來說，一個HTML 元素的ID 可以直接在腳本中當作變量名來使用，而Firefox中不可以。

【兼容處理】盡量採用W3C DOM 的寫法，訪問對象的時候，用document.getElementById("id") 以ID來訪問對象，且一個ID在頁面中必須是唯一的，同樣在以標籤名來訪問對象的時候，用document.getElementsByTagName("div")[0] 。該方式得到較多瀏覽器的支持。

複製代碼代碼如下:

<input id="id" type="button" value="click me"

onclick="alert(document.getElementById('id').value)" />

2. 集合類對象訪問

【分析說明】IE下，可以使用()或[]獲取集合類對象；Firefox下，只能使用[]獲取集合類對象。如：

document.write(document.forms("formName").src);

//該寫法在IE下能訪問到Form對象的scrc屬性

【兼容處理】將document.forms("formName")改為document.forms["formName"]。統一使用[]獲取集合類對象。

3. frame的引用

【分析說明】IE可以通過id或者name訪問這個frame對應的window對象，而Firefox只可以通過name來訪問這個frame對應的window對象。

例如如果上述frame標籤寫在最上層的window裡面的htm裡面，那麼可以這樣訪問：

IE： window.top.frameId或者window.top.frameName來訪問這個window對象；

Firefox：只能這樣window.top.frameName來訪問這個window對象。

【兼容處理】使用frame的name來訪問frame對象，另外，在IE和Firefox中都可以使

window.document.getElementById(”frameId”)來訪問這個frame對象。

4. parentElement

【分析說明】IE中支持使用parentElement和parentNode獲取父節點。而Firefox只可以使用parentNode。

【兼容處理】因為firefox與IE都支持DOM，因此統一使用parentNode來訪問父節點。

5. table操作

【分析說明】IE下table中無論是用innerHTML還是appendChild插入<tr>都沒有效果，而其他瀏覽器卻顯示正常。

【兼容處理】解決的方法是，將<tr>加到table的<tbody>元素中，如下面所示：

複製代碼代碼如下:

var row = document.createElement("tr");

var cell = document.createElement("td");

var cell_text = document.createTextNode("插入的內容");

cell.appendChild(cell_text);

row.appendChild(cell);

document.getElementsByTagName("tbody")[0].appendChild(row);

6. 移除節點removeNode()和removeChild()

【分析說明】appendNode在IE和Firefox下都能正常使用，但是removeNode只能在IE下用。

removeNode方法的功能是刪除一個節點，語法為node.removeNode（false）或者node.removeNode（true），返回值是被刪除的節點。

removeNode（false）表示僅僅刪除指定節點，然後這個節點的原孩子節點提升為原雙親節點的孩子節點。

removeNode（true）表示刪除指定節點及其所有下屬節點。被刪除的節點成為了孤立節點，不再具有有孩子節點和雙親節點。

【兼容處理】Firefox中節點沒有removeNode方法，只能用removeChild方法代替，先回到父節點，在從父節點上移除要移除的節點。

node.parentNode.removeChild(node);

// 為了在ie和firefox下都能正常使用，取上一層的父結點，然後remove。

7. childNodes獲取的節點

【分析說明】childNodes的下標的含義在IE和Firefox中不同，看一下下面的代碼：

複製代碼代碼如下:

</ul>

<input type=button value="click me!" onclick=

"alert(document.getElementById('main').childNodes.length)">

分別用IE和Firefox運行，IE的結果是3，而Firefox則是7。 Firefox使用DOM規範，"#text"表示文本（實際是無意義的空格和換行等）在Firefox裡也會被解析成一個節點，在IE裡只有有實際意義的文本才會解析成"#text"。

【兼容處理】

方法一，獲取子節點時，可以通過node.getElementsByTagName()來迴避這個問題。但是getElementsByTagName對複雜的DOM結構遍歷明顯不如用childNodes，因為childNodes能更好的處理DOM的層次結構。

方法二，在實際運用中，Firefox在遍歷子節點時，不妨在for循環裡加上：

if(childNode.nodeName=="#text") continue;//或者使用nodeType == 1。

這樣可以跳過一些文本節點。