IE 和 FF 對javascript和css的處理不同

轉自：www.cnblogs.com/redstar/archive/2007/04/27/729496.aspx

1、瀏覽器事件的捕捉

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

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

onclick="testevent(event)"

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

2、關於透明度的設置

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

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

3、定位層時的有趣問題

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

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也認了

//給一個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也認了

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透明背景圖片。

先熟悉下濾鏡的語法：
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 :　 濾鏡被禁止。

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

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

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

//給一個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'")";
}

//給一個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'")";
}

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

使用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 name="someButton" value="提交" onclick="javascript:gotoSubmit()" type="button"<
...

function gotoSubmit() {
...
alert(window.event); // use window.event
...
}


新代碼(可在IE和MF中運行)：
>input name="someButton" value="提交" onclick="javascript:gotoSubmit(event)" type="button"<
...

function gotoSubmit(evt) {
evt = evt ? evt : (window.event ? window.event : null);
...
alert(evt); // use evt
...
}

此外，如果新代碼中第一行不改，與老代碼一樣的話(即 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就直接寫&不要寫&amp;amp;例如var url = 『xx.jsp?objectName=xx&objectEvent=xxx』;
frm.action = url那麼很有可能url不會被正常顯示以至於參數沒有正確的傳到服務器
一般會服務器報錯參數沒有找到
當然如果是在tpl中例外，因為tpl中符合xml規範，要求&書寫為&amp;
一般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裡都好用