你知道IE與Firefox獲得對象上的區(qū)別嗎，這里和大家簡單分享一下，相信本文介紹一定會讓你有所收獲。

IE與Firefox獲得對象上的區(qū)別

1.對象問題

1.1Form對象

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

1.2HTML對象

現(xiàn)有問題：
在IE中，HTML對象的ID可以作為document的下屬對象變量名直接使用。在MF中不能。
document.all("itemName")或者document.all("itemId")
解決方法：
使用對象ID作為對象變量名
document.getElementById("itemId")
備注
document.all是IE自定義的方法，所以請大家盡量不使用。
還有一種方式，在IE和MF都可以使用
varf=document.forms["formName"];
varo=f.itemId;

1.3DIV對象

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

1.4關(guān)于frame

現(xiàn)有問題
在IE中可以用window.testFrame取得該frame，mf中不行
解決方法
在frame的使用方面MF和IE的最主要的區(qū)別是：
如果在frame標簽中書寫了以下屬性：

那么IE可以通過id或者name訪問這個frame對應(yīng)的window對象
而mf只可以通過name來訪問這個frame對應(yīng)的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的內(nèi)容
也都可以通過window.top.frameName.location='xx.htm'來切換frame的內(nèi)容

1.5窗口

現(xiàn)有問題
IE中可以通過showModalDialog和showModelessDialog打開模態(tài)和非模態(tài)窗口，但是MF不支持。
解決辦法
直接使用window.open(pageURL,name,parameters)方式打開新窗口。
如果需要傳遞參數(shù)，可以使用frame或者iframe。#p#

2.總結(jié)

2.1在JS中定義各種對象變量名時，盡量使用id，避免使用name。

在IE中，HTML對象的ID可以作為document的下屬對象變量名直接使用。在MF中不能，所以在平常使用時請盡量使用id，避免只使用name，而不使用id。

2.2變量名與某HTML對象id相同的問題

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

1.document.all

Firefox可以兼容document.all，但會生成一條警告?？梢杂胓etElementById("*")或者getElementByTagName("*)來代替
不過對于document.all.length等屬性，則完全不兼容。

2.parentElement

這個也不兼容。比方說，obj.parentElement.name則應(yīng)改成obj.parentNode.attributes.getNamedItem("name").nodeValue（不知道如何寫得更簡潔些）

3.event

W3C不支持windows.event
比方說:
在IE里面
 

.....  
functiononMenuClick()  
{  
collapseMenu(event.srcElement);  
}  

工作正常。不過在Firefox中，則改成：

functiononMenuClick(evt)  
{  
if(evt==null)  
evt=window.event;//ForIE  
varsrcElement=evt.srcElement?evt.srcElement:evt.target;  
//IE使用srcElement,而Firefox使用target  
collapseMenu(srcElement);  
}  
 

 IE和FIREFOX在解析CSS方面的區(qū)別

◆對高度的解析

IE：將根據(jù)內(nèi)容的高度變化，包括未定義高度的圖片內(nèi)容，即使定義了高度，當內(nèi)容超過高度時，將使用實際高度

Firefox：沒有定義高度時，如果內(nèi)容中包括了圖片內(nèi)容，MF的高度解析是根據(jù)印刷標準，這樣就會造成和實際內(nèi)容高度不符合的情況；當定義了高度，但是內(nèi)容超過高度時，內(nèi)容會超出定義的高度，但是區(qū)域使用的樣式不會變化，造成樣式錯位。

結(jié)論：大家在可以確定內(nèi)容高度的情況下***定義高度，如果真的沒有辦法定義高度，***不用使用邊框樣式，否則樣式肯定會出現(xiàn)混亂！

◆img對象alt和title的解析

alt：當照片不存在或者load錯誤時的提示；

title：照片的tip說明。

在IE中如果沒有定義title，alt也可以作為img的tip使用，但是在MF中，兩者完全按照標準中的定義使用

結(jié)論：大家在定義img對象時，***將alt和title對象都寫全，保證在各種瀏覽器中都能正常使用

◆其他的細節(jié)差別

當你在寫css的時候，特別是用float:left（或right）排列一竄圖片時，會發(fā)現(xiàn)在firefox里面正常而IE里面有問題。無論你用margin:0,還是border:0來約束，都無濟于事。

其實這里還有另外一個問題，就是IE對于空格的處理，firefox是忽略的而IE對于塊與塊之間的空格是處理的。也就是說一個div結(jié)束后要緊接著一個div寫，中間不要有回車或者空格。不然也許會有問題，比如3px的偏差，而且這個原因很難發(fā)現(xiàn)。

非常不走運的是我又碰到了這樣的問題，多個img標簽連著，然后定義的float:left，希望這些圖片可以連起來。但是結(jié)果在firefox里面正常而IE里面顯示的每個img都相隔了3px。我把標簽之間的空格都刪除都沒有作用。

后來的解決方法是在img外面套li，并且對li定義margin:0，這樣就解決了IE和firefox的顯示偏差。IE對于一些模型的解釋會產(chǎn)生很多錯誤問題，只有多多嘗試才能發(fā)現(xiàn)原因。這只是一些簡單的區(qū)別,在做布局和CSS設(shè)計時候可以綜合考慮,但最為有效與簡單的解決兼容問題還是用TABLE表格,表格在兼容性方面有著不錯的表現(xiàn).

另外在模版的JS設(shè)計的時候也需要考慮兩者對代碼的兼容

【編輯推薦】

1. 十個不被IE6支持的實用CSS屬性
2. 微軟展示IE9瀏覽器 力推IE8將取代IE6市場
3. 探究IE和Firefox下的2款HTTP調(diào)試工具用法
4. Firefox和IE瀏覽器清除緩存方法揭秘
5. 實現(xiàn)IE6、IE7、IE8多版本瀏覽器共存的五種方法