關於IE和Firefox中javascript和css的一些區別 (來自網路)

最後更新：2018-12-05 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

1、瀏覽器事件的捕捉

在IE下有一個全域的window.event，當事件觸發後可以直接使用，但是在fireFox下沒有這個東西，當調用觸發事件調用一個函數時，如果這個函數沒有形參，那麼firefox會預設的把event（事件）傳進去，但是有參數時就不行啦，所以解決的辦法是，自己手動傳一個event進去，這樣就ok了，具體代碼如下：

下面兩個函數，都是響應滑鼠onclick時觸發的動作，第一個在ie下使用正常，但是在firefox下卻有問題，改成第二個那樣使用，就沒有問題了，注意調用方法的區別

view plaincopy to clipboardprint?
<html>
<head>
<title>test</title>
<script language="javascript">
function testevent()
{
window.alert(window.event.target.id);
return;
}
</script>
</head>
</body>
<a href="#" onclick="testevent()" id="alink">testevent</a>
</body>
</html>
<html>
<head>
<title>test</title>
<script language="javascript">
function testevent()
{
window.alert(window.event.target.id);
return;
}
</script>
</head>
</body>
<a href="#" onclick="testevent()" id="alink">testevent</a>
</body>
</html>

view plaincopy to clipboardprint?
<html>
<head>
<title>test1</title>
<script language="javascript">
function testevent(evt)
{
window.alert(evt.target.id);
return;
}
</script>
</head>
</body>
<a href="#" onclick="testevent(event)" id="alink">testevent</a>
</body>
</html>
<html>
<head>
<title>test1</title>
<script language="javascript">
function testevent(evt)
{
window.alert(evt.target.id);
return;
}
</script>
</head>
</body>
<a href="#" onclick="testevent(event)" id="alink">testevent</a>
</body>
</html>

其實event對象在ie以及firefox還有很多不同的特性，比如clienx，pagex等，但是由於在現在流行使用的js架構 prototype中解決了很多這些問題，所以如果是在基於prototype下的開發，這些問題可以考慮得少一些了，只是上面提到的這個捕獲問題， prototype中並沒有完善的解決，所以單獨列出來，下面提及的關於js的也都只列出prototype中未解決的

2、關於透明度的設定

為了達到給層設定半透明的效果時，在IE和firefox下也有所不同，IE下，style的filter屬性有Alpha值可供使用，而firefox下沒有Alpha值，所以得指定style的MozOpacity，代碼見下：

<STYLE>
filter: Alpha(opacity=10); /*IE*/
-moz-opacity:.1; /*老版本FireFox 1.0 以前*/
opacity:0.1; /*新版本FireFox*/
</STYLE>

view plaincopy to clipboardprint?
<script language="javascript">
//設定一個id為screen的div的透明度為45%，在IE下：
document.getElementById('screen').style.filter='Alpha(Opacity=45)';

//而在firefox下：
document.getElementById('screen').style.MozOpacity='0.45';
</script>
<script language="javascript">
//設定一個id為screen的div的透明度為45%，在IE下：
document.getElementById('screen').style.filter='Alpha(Opacity=45)';

//而在firefox下：
document.getElementById('screen').style.MozOpacity='0.45';
</script>

3、定位層時的有趣問題

在定位層時，我們的做法是給層的style.left 和 style.top設定位置，但是今天發現了一個很有趣的問題，代碼如下：

view plaincopy to clipboardprint?
<script language="javascript">
//給一個id為dialog的層定位
document.getElementById('dialog').left = 100;
document.getElementById('dialog').left = 100;

//問題出現了，在ie下，預設將層的左上方定位在（100px,100px）這個點上
//但是在firefox下卻死活都不行，後來發現，原來ie在你沒有指定單位的時候
//替你加上了單位“px”，而firefox比較“笨”
//他覺得你沒有指定單位，就不給你定位，好了，那麼標準的寫法應該是這樣：

document.getElementById('dialog').left = 100px;
document.getElementById('dialog').left = 100px;

//這樣firefox也認了

</script>
<script language="javascript">
//給一個id為dialog的層定位
document.getElementById('dialog').left = 100;
document.getElementById('dialog').left = 100;

document.getElementById('dialog').left = 100px;
document.getElementById('dialog').left = 100px;

//這樣firefox也認了

</script>

4、PNG透明背景的問題
PNG圖片在網站設計中是不可或缺的部分，最大的特點應該在於PNG可以無損壓縮，而且還可以設定透明，對於增強網站的圖片色彩效果有重要的作用。

但為什麼PNG圖片卻沒有GIF和JPG圖片的使用來得廣泛呢，這個禍因應歸屬於微軟的IE瀏覽器（Firefox和Opera對PNG支援的比較好，而現在瀏覽器的主流IE6卻無法很好的支援）。不過微軟在最近也開始改過自新了，新出的的IE7可以很好的支援PNG，可以想象在未來的網路世界， PNG圖片的重要性將會更加凸顯。

但在大家還在絕大多數的使用IE6的時候，我們又怎樣在IE6的世界去完美使用PNG圖片呢（PNG圖片的時候最重要的地方在於PNG透明背景圖片的運用）。我們應該慶幸我們是幸福的！IE5.5+的AlphaImageLoader濾鏡為通向png提供了一個道路，如果他載入的是PNG (Portable Network Graphics)格式，則0%-100%的透明度也被提供。但IE5.0無法支援屬性，那隻有完全絕望了，不過絕望的只是幾個，得到是絕大數，我們應該知足，知足才會常樂。

現在我們將通過Hack和AlphaImageLoader濾鏡來實現IE6下的PNG透明背景圖片。

先熟悉下濾鏡的文法：

view plaincopy to clipboardprint?
filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src="/blog/sURL" )

屬性：

enabled : 可選項。布爾值(Boolean)。設定或檢索濾鏡是否啟用。true | false
true :　預設值。濾鏡啟用。
false :　濾鏡被禁止。

sizingMethod : 可選項。字串(String)。設定或檢索濾鏡作用的對象的圖片在對象容器邊界內的顯示方式。
crop : 剪下圖片以適應對象尺寸。
image : 預設值。增大或減小對象的尺寸邊界以適應圖片的尺寸。
scale : 縮放圖片以適應對象的尺寸邊界。

src :　必選項。字串(String)。使用絕對或相對 url 地址指定背景映像。假如忽略此參數，濾鏡將不會作用。
filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src="/blog/sURL" )

屬性：

enabled : 可選項。布爾值(Boolean)。設定或檢索濾鏡是否啟用。true | false
true :　預設值。濾鏡啟用。
false :　濾鏡被禁止。

src :　必選項。字串(String)。使用絕對或相對 url 地址指定背景映像。假如忽略此參數，濾鏡將不會作用。

Firefox、Opera等完全支援PNG透明圖片的瀏覽器也支援子選取器（>），而IE不識別（包括IE7），所有我們可以通過這來定義Firefox、Opera等瀏覽器中PNG圖片的樣式。如下

view plaincopy to clipboardprint?
<script language="javascript>
//給一個id為infoBox的層設定一個透明背景，背景圖片是down.png，代碼如下
//進行了瀏覽器判斷

if (navigator.appName!="Microsoft Internet Explorer")
{
$('infoBox').style.background="0 url(/blog/down.png') no-repeat";
}
else
{
$('infoBox').style.background="0 none no-repeat";
$('infoBox').style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=scale,src="/blog/down.png'")";
}

</script>
<script language="javascript>
//給一個id為infoBox的層設定一個透明背景，背景圖片是down.png，代碼如下
//進行了瀏覽器判斷

</script>

不過需要注意的一個地方：

使用AlphaImageLoader 後該地區的超連結和按鈕會失效，解決的方法：

對連結或按鈕直接設定相對位置，讓它們浮動於濾鏡地區的上面。

這裡有4條經驗：

1、在定義頁面元素的時候，如果該頁面元素不需要被指令碼調用，那麼它就不需要定義其name和id屬性；

2、如果需要定義頁面元素的name,id屬性，那麼避免不同元素的name和id相同；

3、如果沒有特殊需要，盡量讓name和id相同，這主要是為了通用

4、在指令碼中，獲得元素時，盡量用document.getElementById("name / id") ，能不使用盡量不使用其他的

下面是收集的一些IE和Firefox的差異：

1. 對象問題
1.1 Form對象
現有問題：
現有代碼這獲得form對象通過document.forms("formName")，這樣使用在IE 能接受，MF 不能。
解決方案：
改用作為下標運算。改為document.forms["formName"]
備忘
上述的改用作為下標運算中的formName是id而name

1.2 HTML對象
現有問題：
在 IE 中，HTML 對象的 ID 可以作為 document 的下屬物件變數名直接使用。在 MF 中不能。
document.all("itemName")或者document.all("itemId")
解決方案：
使用對象ID作為物件變數名
document.getElementById("itemId")
備忘
document.all是IE自訂的方法，所以請大家盡量不使用。
還有一種方式，在IE和MF都可以使用
var f = document.forms["formName "];
var o = f. itemId;

1.3 DIV對象
現有問題：
在 IE 中，DIV對象可以使用ID作為物件變數名直接使用。在 MF 中不能。
DivId.style.display = "none"
解決方案：
document.getElementById("DivId").style.display = "none"
備忘
獲得對象的方法不管是不是DIV對象，都使用getElementById方法。參見1.2

1.4 關於frame
現有問題
在 IE中可以用window.testFrame取得該frame，mf中不行
解決方案
在frame的使用方面MF和IE的最主要的區別是：
如果在frame標籤中書寫了以下屬性：

那麼IE可以通過id或者name訪問這個frame對應的window對象
而mf只可以通過name來訪問這個frame對應的window對象
例如如果上述frame標籤寫在最上層的window裡面的htm裡面，那麼可以這樣訪問
IE： window.top.frameId或者window.top.frameName來訪問這個window對象
MF：只能這樣window.top.frameName來訪問這個window對象
另外，在mf和ie中都可以使用window.top.document.getElementById("frameId")來訪問frame標籤
並且可以通過window.top.document.getElementById("testFrame").src = 'xx.htm'來切換frame的內容
也都可以通過window.top.frameName.location = 'xx.htm'來切換frame的內容

1.5 視窗
現有問題
IE中可以通過showModalDialog和showModelessDialog開啟模態和非模態視窗，但是MF不支援。
解決辦法
直接使用window.open(pageURL,name,parameters)方式開啟新視窗。
如果需要傳遞參數，可以使用frame或者iframe。

2. 總結
2.1 在JS中定義各種物件變數名時，盡量使用id，避免使用name。
在 IE 中，HTML 對象的 ID 可以作為 document 的下屬物件變數名直接使用。在 MF 中不能，所以在平常使用時請盡量使用id，避免只使用name，而不使用id。

2.2 變數名與某 HTML 對象 id 相同的問題
現有問題
在 MF 中，因為對象 id 不作為 HTML 對象的名稱，所以可以使用與 HTML 對象 id 相同的變數名，IE 中不能。
解決方案
在聲明變數時，一律加上 var ，以避免歧義，這樣在 IE 中亦可正常運行。
此外，最好不要取與 HTML 對象 id 相同的變數名，以減少錯誤。

1. document.form.item 問題
(1)現有問題：
現有代碼中存在許多 document.formName.item("itemName") 這樣的語句，不能在 MF 下運行
(2)解決方案：
改用 document.formName.elements["elementName"]
(3)其它
參見 2

2. 集合類對象問題
(1)現有問題：
現有代碼中許多集合類對象取用時使用 ()，IE 能接受，MF 不能。
(2)解決方案：
改用 [] 作為下標運算。如：document.forms("formName") 改為 document.forms["formName"]。
又如：document.getElementsByName("inputName")(1) 改為 document.getElementsByName("inputName")[1]

3. window.event
(1)現有問題：
使用 window.event 無法在 MF 上運行
(2)解決方案：
MF 的 event 只能在事件發生的現場使用，此問題暫無法解決。可以這樣變通：
原代碼(可在IE中運行)：
<input type="button" name="someButton" value="提交" onclick="javascript:gotoSubmit()"/>
...
<script language="javascript">
function gotoSubmit() {
...
alert(window.event); // use window.event
...
}
</script>

新代碼(可在IE和MF中運行)：
<input type="button" name="someButton" value="提交" onclick="javascript:gotoSubmit(event)"/>
...
<script language="javascript">
function gotoSubmit(evt) {
evt = evt ? evt : (window.event ? window.event : null);
...
alert(evt); // use evt
...
}
</script>
此外，如果新代碼中第一行不改，與老代碼一樣的話(即 gotoSubmit 調用沒有給參數)，則仍然只能在IE中運行，但不會出錯。所以，這種方案 tpl 部分仍與老代碼相容。

4. HTML 對象的 id 作為對象名的問題
(1)現有問題
在 IE 中，HTML 對象的 ID 可以作為 document 的下屬物件變數名直接使用。在 MF 中不能。
(2)解決方案
用 getElementById("idName") 代替 idName 作為物件變數使用。

5. 用idName字串取得對象的問題
(1)現有問題
在IE中，利用 eval(idName) 可以取得 id 為 idName 的 HTML 對象，在MF 中不能。
(2)解決方案
用 getElementById(idName) 代替 eval(idName)。

6. 變數名與某 HTML 對象 id 相同的問題
(1)現有問題
在 MF 中，因為對象 id 不作為 HTML 對象的名稱，所以可以使用與 HTML 對象 id 相同的變數名，IE 中不能。
(2)解決方案
在聲明變數時，一律加上 var ，以避免歧義，這樣在 IE 中亦可正常運行。
此外，最好不要取與 HTML 對象 id 相同的變數名，以減少錯誤。
(3)其它
參見問題4

7. event.x 與 event.y 問題
(1)現有問題
在IE 中，event 對象有 x, y 屬性，MF中沒有。
(2)解決方案
在MF中，與event.x 等效的是 event.pageX。但event.pageX IE中沒有。
故採用 event.clientX 代替 event.x。在IE 中也有這個變數。
event.clientX 與 event.pageX 有微妙的差別（當整個頁面有捲軸的時候），不過大多數時候是等效的。

如果要完全一樣，可以稍麻煩些：
mX = event.x ? event.x : event.pageX;
然後用 mX 代替 event.x
(3)其它
event.layerX 在 IE 與 MF 中都有，具體意義有無差別尚未實驗。

8. 關於frame
(1)現有問題
在 IE中可以用window.testFrame取得該frame，mf中不行
(2)解決方案
在frame的使用方面mf和ie的最主要的區別是：
如果在frame標籤中書寫了以下屬性：
<frame src="xx.htm" id="frameId" name="frameName" />
那麼ie可以通過id或者name訪問這個frame對應的window對象
而mf只可以通過name來訪問這個frame對應的window對象
例如如果上述frame標籤寫在最上層的window裡面的htm裡面，那麼可以這樣訪問
ie： window.top.frameId或者window.top.frameName來訪問這個window對象
mf：只能這樣window.top.frameName來訪問這個window對象

另外，在mf和ie中都可以使用window.top.document.getElementById("frameId")來訪問frame標籤
並且可以通過window.top.document.getElementById("testFrame").src = ‘xx.htm’來切換frame的內容
也都可以通過window.top.frameName.location = ‘xx.htm’來切換frame的內容
關於frame和window的描述可以參見bbs的‘window與frame’文章
以及/test/js/test_frame/目錄下面的測試
----adun 2004.12.09修改

9. 在mf中，自己定義的屬性必須getAttribute()取得

10.在mf中沒有 parentElement parement.children 而用parentNode parentNode.childNodes
childNodes的下標的含義在IE和MF中不同，MF使用DOM規範，childNodes中會插入空白文本節點。
一般可以通過node.getElementsByTagName()來迴避這個問題。
當html中節點缺失時，IE和MF對parentNode的解釋不同，例如
<form>
<table>
<input/>
</table>
</form>
MF中input.parentNode的值為form, 而IE中input.parentNode的值為空白節點

MF中節點沒有removeNode方法，必須使用如下方法 node.parentNode.removeChild(node)

11.const 問題
(1)現有問題:
在 IE 中不能使用 const 關鍵字。如 const constVar = 32; 在IE中這是語法錯誤。
(2)解決方案:
不使用 const ，以 var 代替。

12. body 對象
MF的body在body標籤沒有被瀏覽器完全讀入之前就存在，而IE則必須在body完全被讀入之後才存在

13. url encoding
在js中如果書寫url就直接寫&不要寫&例如var url = ‘xx.jsp?objectName=xx&objectEvent=xxx’;
frm.action = url那麼很有可能url不會被正常顯示以至於參數沒有正確的傳到伺服器
一般會伺服器報錯參數沒有找到
當然如果是在tpl中例外，因為tpl中符合xml規範，要求&書寫為&
一般MF無法識別js中的&

14. nodeName 和 tagName 問題
(1)現有問題：
在MF中，所有節點均有 nodeName 值，但 textNode 沒有 tagName 值。在 IE 中，nodeName 的使用好象
有問題（具體情況沒有測試，但我的IE已經死了好幾次）。
(2)解決方案：
使用 tagName，但應檢測其是否為空白。

15. 元素屬性
IE下 input.type屬性為唯讀，但是MF下可以修改

16.比如td.setAttribute("colspan","3");在mf中好用,在ie裡不好用
必須是td.setAttribute("colSpan","3");這樣ie和mf裡都好用

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More