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.all
Firefox可以兼容document.all， 但會生成一條警告。可以用getElementById("*") 或者 getElementByTagName("*)來代替
不過對於document.all.length等屬性，則完全不兼容。
2. parentElement
這個也不兼容。比方說， obj.parentElement.name 則應改成 obj.parentNode.attributes.getNamedItem("name").nodeValue （不知道如何寫得更簡潔些）
3. event
W3C不支持windows.event
比方說:
在IE裏面
<div class="menu" id="menu" ōnclick="onMenuClick(); ">.....</div>
function onMenuClick()
{
collapseMenu(event.srcElement);
}
工作正常。不過在Firefox中，則改成：
<div class="menu" id="menu" ōnclick="onMenuClick(event); ">
function onMenuClick(evt)
{
if(evt == null)
evt = window.event; // For IE
var srcElement = evt.srcElement? evt.srcElement : evt.target; // IE使用srcElement, 而Firefox使用target
collapseMenu(srcElement);
}
IE和FIREFOX在解析CSS方面的區別
對高度的解析
IE：將根據內容的高度變化，包括未定義高度的圖片內容，即使定義了高度，當內容超過高度時，將使用實際高度
Firefox：沒有定義高度時，如果內容中包括了圖片內容，MF的高度解析是根據印刷標準，這樣就會造成和實際內容高度不符合的情況；當定義了高度，但是內容超過高度時，內容會超出定義的高度，但是區域使用的樣式不會變化，造成樣式錯位。
結論：大家在可以確定內容高度的情況下最好定義高度，如果真的沒有辦法定義高度，最好不用使用邊框樣式，否則樣式肯定會出現混亂！
img對象alt和title的解析
alt：當照片不存在或者load錯誤時的提示；
title：照片的tip說明。
在IE中如果沒有定義title，alt也可以作爲img的tip使用，但是在MF中，兩者完全按照標準中的定義使用
結論：大家在定義img對象時，最後將alt和title對象都寫全，保證在各種瀏覽器中都能正常使用
其他的細節差別
當你在寫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表格,表格在兼容性方面有着不錯的表現.
另外在模版的JS設計的時候也需要考慮兩者對代碼的兼容,以下是對IE與FIREFOX中JS的一些測試:
以下以 IE 代替 Internet Explorer，以 MF 代替 Mozilla Firefox
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)其它
3. window.event
(1)現有問題：
使用 window.event 無法在 MF 上運行
(2)解決方法：
MF 的 event 只能在事件發生的現場使用，此問題暫無法解決。可以這樣變通：
原代碼(可在IE中運行)：
<input type="button" name="someButton" value="提交"
οnclick="javascrīpt:gotoSubmit()"/>
...
<scrīpt language="javascrīpt">
function gotoSubmit() {
...
alert(window.event); // use window.event
...
}
</scrīpt>
新代碼(可在IE和MF中運行)：
<input type="button" name="someButton" value="提交"
οnclick="javascrīpt:gotoSubmit(event)"/>
...
<scrīpt language="javascrīpt">
function gotoSubmit(evt) {
evt = evt ? evt : (window.event ? window.event : null);
...
alert(evt); // use evt
...
}
</scrīpt>
此外，如果新代碼中第一行不改，與老代碼一樣的話(即 gotoSubmit 調用沒有給
參數)，則仍然只能在IE中運行，但不會出錯。所以，這種方案 tpl 部分仍與老
代碼兼容。
///////////////////////////////////////////////////////////////////////
// 以下來自網友 llihua
//事件處理函數
function a(evt) { //FireFox
evt = evt? evt: window.event; //IE
var srcElem = (evt.target)? evt.target: evt.srcElement;
//事件處理...
}
在連接事件處理函數的時候，可以用Inline HTML方式，也可以用Event
property方式定義。
1、使用Inline HTML方式，如：
<input type="radio" name="radio" value="1"
οnclick="javascrīpt:a(event)">
注意：
(1)javascrīpt不能省；
(2)實參要使用event，形參使用什麼都可以(如evt、event等)；
2、使用Event property方式綁定事件處理函數，如：
document.form2.radio[0].onclick = a;
// 以上來自網友 llihua
///////////////////////////////////////////////////////////////////////
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屬性爲只讀，但是ME下可以修改
16. document.getElementsByName() 和 document.all[name] 的問題
(1)現有問題：
在 IE 中，getElementsByName()、document.all[name] 均不能用來取得 div 元素
（是否還有其它不能取的元素還不知道）。
17. DOM 數據島的問題
(1)現有問題
在IE中, <xml>標籤具有特殊意義, 可以內含XML DOM, 並能實現與HTML組件的數據
綁定. 在MF中,<xml>則僅僅是一個未知的標記而已.
另外, 對 IE 來說, <xml>實際意味着這裏是一個ActiveX對象, 但它卻掛在HTML本
身的DOM樹下作爲一個節點, 因而會對DOM樹的遍歷造成嚴重影響.
(2)解決方法
IE的數據綁定機制是可以用JS來模擬的, 但是太麻煩, 建議不使用數據綁定機制或者
尋找實現這種模擬的庫來做. 我們只討論如何實現DOM的兼容.
在MF中無論已知的HTML標記還是其它符合XML規範的標記, 都是用統一的DOM樹來處理
的, 因此, MF事實上完全可以使用DOM數據島, 但與IE小小的不同在於: 在IE中<xml>
是個 DOM document, 而在MF只是 DOM node. 這個差別通常不足爲患.
但是有一個小小的細節, 爲了兼容HTML相當隨意的語法, MF無法識別簡寫的空標記.
如: <xml id="xx"><book><title>xxxx</title><content/><index/></book></xml>,
這其中<content/>和<index/>是簡寫形式的, 會使MF無法識別, 應當寫成:
<content></content><index></index>
不過, 我懷疑如果用XHTML, 可能就沒有這種問題. 但我還沒有試過.
對於IE中<xml>干擾HTML的DOM結構問題, 我現在的方法是處理完畢後把它從HTML的
DOM中刪除. 不知道還有沒有更好的解
FireFox與IE開發上的一些區別
1. window.event
* IE：有window.event對象
* FF：沒有window.event對象。可以通過給函數的參數傳遞event對象。如οnmοusemοve=doMouseMove(event)
2. 鼠標當前座標
* IE：event.x和event.y。
* FF：event.pageX和event.pageY。
* 通用：兩者都有event.clientX和event.clientY屬性。
3. 鼠標當前座標(加上滾動條滾過的距離)
* IE：event.offsetX和event.offsetY。
* FF：event.layerX和event.layerY。
4. 標籤的x和y的座標位置：style.posLeft 和 style.posTop
* IE：有。
* FF：沒有。
* 通用：object.offsetLeft 和 object.offsetTop。
5. 窗體的高度和寬度
* IE：document.body.offsetWidth和document.body.offsetHeight。注意：此時頁面一定要有body標籤。
* FF：window.innerWidth和window.innerHegiht，以及 document.documentElement.clientWidth和 document.documentElement.clientHeight。
* 通用：document.body.clientWidth和document.body.clientHeight。
6. 添加事件
* IE：element.attachEvent("onclick", func);。
* FF：element.addEventListener("click", func, true)。
*
通用：element.οnclick=func。雖然都可以使用onclick事件，但是onclick和上面兩種方法的效果是不一樣的，
onclick 只有執行一個過程，而attachEvent和addEventListener執行的是一個過程列表，也就是多個過程。例如：
element.attachEvent("onclick", func1);element.attachEvent("onclick",
func2)這樣func1和func2都會被執行。
7. 標籤的自定義屬性
* IE：如果給標籤div1定義了一個屬性value，可以div1.value和div1["value"]取得該值。
* FF：不能用div1.value和div1["value"]取。
* 通用：div1.getAttribute("value")。
8. 父節點、子節點和刪除節點
* IE：parentElement、parement.children，element.romoveNode(true)。
* FF：parentNode、parentNode.childNodes，node.parentNode.removeChild(node)。
9. 畫圖
* IE：VML。
* FF：SVG。
10. CSS：透明
* IE：filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。
* FF：opacity:0.6。
11. CSS：圓角
* IE：不支持圓角。
*
FF：
-moz-border-radius:4px，或者-moz-border-radius-topleft:4px;-moz-border-
radius-topright:4px;-moz-border-radius-bottomleft:4px;-moz-border-
radius- bottomright:4px;。
12. CSS：雙線凹凸邊框
* IE：border:2px outset;。
*
FF： -moz-border-top-colors: #d4d0c8 white;-moz-border-left-colors:
#d4d0c8 white;-moz-border-right-colors:#404040
#808080;-moz-border-bottom-colors:#404040 #808080;。
13. 其它（待整理）
FireFox: div 設置 margin-left, margin-right 爲 auto 時已經居中, IE 不行
FireFox: body 設置 text-align 時, div 需要設置 margin: auto(主要是 margin-left,margin-right) 方可居中
FireFox: 設置 padding 後, div 會增加 height 和 width, 但 IE 不會, 故需要用 !important 多設一個 height 和 width
FireFox: 支持 !important, IE 則忽略, 可用 !important 爲 FireFox 特別設置樣式
div 的垂直居中問題: vertical-align:middle; 將行距增加到和整個DIV一樣高 line-height:200px; 然後插入文字，就垂直居中了。缺點是要控制內容不要換行
cursor: pointer 可以同時在 IE FireFox 中顯示遊標手指狀， hand 僅 IE 可以
FireFox:
鏈接加邊框和背景色，需設置 display: block, 同時設置 float: left 保證不換行。參照 menubar, 給 a 和
menubar 設置高度是爲了避免底邊顯示錯位, 若不設 height, 可以在 menubar 中插入一個空格
XHTML+CSS兼容性解決方案小集
使用XHTML＋CSS構架好處不少，但也確實存在一些問題，不論是因爲使用不熟練還是思路不清晰，我就先把一些我遇到的問題寫在下面:
1.在mozilla firefox和IE中的BOX模型解釋不一致導致相差2px解決方法：
div{margin:30px!important;margin:28px;}注意這兩個margin的順序一定不能寫反，據阿捷的說法!important這個屬性IE不能識別，但別的瀏覽器可以識別。所以在IE下其實解釋成這樣：
div{maring:30px;margin:28px}重複定義的話按照最後一個來執行，所以不可以只寫margin:XXpx!important;
http://bbs.itokit.com/ 專業的web開發交流論壇
2.IE5
和IE6的BOX解釋不一致IE5下div{width:300px;margin:0 10px 0
10px;}div的寬度會被解釋爲300px-10px(右填充)-10px(左填充)最終div的寬度爲280px，而在IE6和其他瀏覽器上寬度則
是以300px+10px(右填充)+10px(左填充)=320px來計算的。這時可以做如下修改
div{width:300px!important;width /**/:340px;margin:0 10px 0 10px}
3.ul標籤在Mozilla中默認是有padding值的,而在IE中只有margin有值所以先定義
ul{margin:0;padding:0;}就能解決大部分問題
4.關於腳本，在xhtml1.1中不支持language屬性，只需要把代碼改爲
<script type=”text/javascript”>
FireFox: div 設置 margin-left, margin-right 爲 auto 時已經居中, IE 不行
IE怎麼不行? .div{width:100px;margin:0 auto;}一樣居中
FireFox: 設置 padding 後, div 會增加 height 和 width, 但 IE 不會, 故需要用 !important 多設一個 height 和 width
這個是ie對css盒模型解釋有問題造成的,只能遷就它網頁教學網
FireFox: 支持 !important, IE 則忽略, 可用 !important 爲 FireFox 特別設置樣式
IE7 一樣兼容 !important 了
cursor: pointer 可以同時在 IE FireFox 中顯示遊標手指狀， hand 僅 IE 可以
pointer是標準的寫法,hand是ie6之前版本自行定義的
補充:
ie6有margin雙倍外補丁bug,需要做css .hack
firefox更符合標準,在浮動和清除浮動上需要特別注意,而ie容錯性比較好
ie中height小於一定值(可能是18px)時,可能會在頁面上體現不出來,需要overflow:hidden;而firefox可以完全體現height;
裝好ie6 ie7 ff2大致寫個一兩個頁面就知道大概的不同了,其實不難
屏蔽IE瀏覽器（也就是IE下不顯示）
*:lang(zh) select {font:12px !important;} /*FF的專用*/
select:empty {font:12px !important;} /*safari可見*/
這裏select是選擇符，根據情況更換。第二句是MAC上safari瀏覽器獨有的。
僅IE7識別
*+html {…}
當面臨需要只針對IE7做樣式的時候就可以採用這個HACK。
IE6及IE6以下識別
* html {…}
這個地方要特別注意很多地主都寫了是IE6的HACK其實IE5.x同樣可以識別這個HACK。其它瀏覽器不識別。
html/**/ >body select {……}網頁教學網
這句與上一句的作用相同。
僅IE6不識別
select { display /*IE6不識別*/:none;}
這裏主要是通過CSS註釋分開一個屬性與值，流釋在冒號前。
僅IE6與IE5不識別
select/**/ { display /*IE6,IE5不識別*/:none;}
這裏與上面一句不同的是在選擇符與花括號之間多了一個CSS註釋。
僅IE5不識別
select/*IE5不識別*/ { display:none;}
這一句是在上一句中去掉了屬性區的註釋。只有IE5不識別
盒模型解決方法
selct {width:IE5.x寬度; voice-family :""}""; voice-family:inherit; width:正確寬度;}
盒模型的清除方法不是通過!important來處理的。這點要明確。
清除浮動
select:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
在Firefox中，當子級都爲浮動時，那麼父級的高度就無法完全的包住整個子級，那麼這時用這個清除浮動的HACK來對父級做一次定義，那麼就可以解決這個問題 。
截字省略號
select { -o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; }
這個是在越出長度後會自行的截掉多出部分的文字，並以省略號結尾，很好的一個技術。只是目前Firefox並不支持。