本文总结了Internet Explorer与Firefox在JavaScript DOM操作、事件处理及CSS样式渲染上的主要差异。涵盖input属性、集合对象、自定义属性、变量命名、常量定义、事件对象属性、窗口打开方式、Frame访问、body加载时机、父元素获取、光标样式、文本节点、表格操作、内边距、列表缩进、透明与圆角等29个常见兼容性问题，并提供相应的统一解决方案。
input标签id与name属性兼容性问题
在IE浏览器中，input标签的id属性默认与name属性一致，而在Firefox中，必须显式指定id属性，否则无法通过id获取该元素。
例如：<input type="text" name="username" value="">
在IE中，以下代码可以正常运行，但在Firefox中则会失效：
<script>
alert(document.getElementById("username").value);
</script>
为确保兼容性，必须显式添加id属性，代码如下：
<input type="text" name="username" id="username" value="">
表单元素访问与集合对象处理
以下是关于其他常见兼容性问题的补充说明：
1. document.formName.item("itemName") 问题
说明：在IE中，可以通过document.formName.item("itemName")或document.formName.elements["elementName"]访问表单元素；
在Firefox中，仅支持document.formName.elements["elementName"]。
解决方案：统一使用document.formName.elements["elementName"]。
2.集合类对象问题
说明：在IE中，可以使用()或[]获取集合类对象；在Firefox中，仅支持[]。
解决方案：统一使用[]获取集合类对象。
3.自定义属性问题
自定义属性与ID获取方法差异
说明：在IE中，可以通过常规属性访问或getAttribute()获取自定义属性；在Firefox中，仅支持getAttribute()。
解决方案：统一通过getAttribute()获取自定义属性。
4.eval("idName")问题
说明：在IE中，可以使用eval("idName")或getElementById("idName")获取id为idName的HTML对象；在Firefox中，仅支持getElementById("idName")。
解决方案：统一使用getElementById("idName")获取id为idName的HTML对象。
5.变量名与某HTML对象ID相同的问题
变量命名与HTML对象ID冲突处理
说明：在IE中，HTML对象的ID可直接作为document的下属对象变量名使用；在Firefox中则不行。Firefox允许使用与HTML对象ID相同的变量名，而IE不允许。
解决方案：使用document.getElementById("idName")替代document.idName。建议避免使用与HTML对象ID相同的变量名，并在声明变量时统一使用var，以避免歧义。
6.const问题
常量定义与input.type属性差异
说明：在Firefox中，可以使用const或var定义常量；在IE中，仅支持var。
解决方案：统一使用var定义常量。
7.input.type属性问题
说明：在IE中，input.type属性为只读；在Firefox中，input.type属性为可读写。
8.window.event问题
window.event与事件对象属性兼容
说明：在IE中，window.event可直接使用；在Firefox中，event仅能在事件发生的现场通过参数传递获取。Firefox忽略window.event，需从源处加入event作为参数传递。
解决方案：
IE与Firefox通用：
Submitted(event)"/> …
<script language="javascript">
function Submitted(evt) {
evt=evt?evt:(window.event?window.event:null);
}
</script>
window.open("b.html","","modal=yes,width=500,height=500,resizable=no,scrollbars=no");
9.event.x与event.y问题
event坐标与srcElement/target处理
说明：在IE中，even对象有x,y属性，但没有pageX,pageY属性；在Firefox中，even对象有pageX,pageY属性，但没有x,y属性。
解决方案：使用mX（mX = event.x ? event.x : event.pageX;）替代IE下的event.x或Firefox下的event.pageX。
10.event.srcElement问题
说明：在IE中，event对象有srcElement属性，但没有target属性；在Firefox中，even对象有target属性，但没有srcElement属性。
解决方案：使用obj（obj = event.srcElement ? event.srcElement : event.target;）替代IE下的event.srcElement或Firefox下的event.target。请注意event的兼容性问题。
11.window.location.href问题
window.location与窗口打开方式
说明：在IE或Firefox 2.0.x中，可以使用window.location或window.location.href；在Firefox 1.5.x中，仅支持window.location。
解决方案：使用window.location替代window.location.href。
12.模态和非模态窗口问题
说明：在IE中，可以通过showModalDialog和showModelessDialog打开模态和非模态窗口；在Firefox中不支持。
解决方案：直接使用window.open(pageURL,name,parameters)打开新窗口。
若需将子窗口参数传回父窗口，可在子窗口中使用window.opener访问父窗口。例如：var parWin = window.opener; parWin.document.getElementById("Aqing").value = "Aqing";
13.frame问题
frame对象访问与内容切换
以下面frame为例：
<frame src="xxx.html" id="frameId" name="frameName" />
(1)访问frame对象：
IE：使用window.frameId或window.frameName访问frame对象。frameId和frameName可同名。
Firefox：仅支持window.frameName访问frame对象。
此外，在IE和Firefox中均可使用window.document.getElementById("frameId")访问frame对象。
(2)切换frame内容：
在IE和Firefox中，均可使用window.document.getElementById("testFrame").src = "xxx.html"或window.frameName.location = "xxx.html"切换frame内容。
若需将frame参数传回父窗口（非opener，而是parent frame），可在frame中使用parent访问父窗口。例如：parent.document.form1.filename.value="Aqing";
14.body问题
body加载时机与父元素获取
Firefox中，body在body标签未被浏览器完全读入前即存在；IE中，body仅在body标签被完全读入后才存在。
15. 事件委托方法
IE：document.body.onload = inject; //Function inject()在此前已定义
Firefox：document.body.onload = inject();
16. firefox与IE的父元素(parentElement)的区别
IE：obj.parentElement
Firefox：obj.parentNode
解决方案：由于Firefox与IE均支持DOM，建议使用obj.parentNode。
17.cursor:hand VS cursor:pointer
光标样式与文本节点处理
Firefox不支持hand，但IE支持pointer。
解决方案：统一使用pointer。
18.innerText在IE中能正常工作，但是innerText在FireFox中却不行. 需用textContent。
解决方案：
if(navigator.appName.indexOf("Explorer") > -1){
document.getElementById('element').innerText = "my text";
} else{
document.getElementById('element').textContent = "my text";
}
19. FireFox中设置HTML标签的style时，所有位置性和字体尺寸的值必须后跟px。这个ie也是支持的。
20. ie,firefox以及其它浏览器对于 table 标签的操作都各不相同，在ie中不允许对table和tr的innerHTML赋值，使用js增加一个tr时，使用appendChild方法也不管用。
表格操作与CSS样式兼容
解决方案：
//向table追加一个空行：
var row = otable.insertRow(-1);
var cell = document.createElement("td");
cell.innerHTML = " ";
cell.className = "XXXX";
row.appendChild(cell);
21. padding 问题
padding 5px 4px 3px 1px FireFox无法解释简写,
必须改为 padding-top:5px; padding-right:4px; padding-bottom:3px; padding-left:1px;
22. 消除ul、ol等列表的缩进时
CSS透明、圆角与边框处理
样式应写成:list-style:none;margin:0px;padding:0px;
其中margin属性对IE有效，padding属性对FireFox有效
23. CSS透明
IE：filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。
FF：opacity:0.6。
24. 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;。
25. 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;
26. 对select的options集合操作
select操作与XMLHTTP请求
枚举元素除了[]外，selectName.options.item()也可用。此外，selectName.options.length、selectName.options.add/remove在两种浏览器中均可用。注意在add后赋值元素，否则会失败（经测试如此）。
27. XMLHTTP的区别
//mf
if (window.XMLHttpRequest) //mf
{
xmlhttp=new XMLHttpRequest()
xmlhttp.
xmlhttp.open("GET",url,true)
xmlhttp.send(null)
}
//ie
else if (window.ActiveXObject) // code for IE
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP")
if (xmlhttp)
{
xmlhttp.
xmlhttp.open("GET",url,true)
xmlhttp.send()
}
}
}
28. innerHTML的区别
innerHTML兼容与img刷新问题
Firefox不支持innerHTML，解决办法如下
rng = document.createRange();
el = document.getElementById(elementid);
rng.setStartBefore(el);
htmlFrag = rng.createContextualFragment(content);
while (el.hasChildNodes()) //清除原有内容，加入新内容
el.removeChild(el.lastChild);
el.appendChild(htmlFrag);
29. img的src刷新问题
在IE下可用<img id="pic" onclick= "this.src= 'aa.php'" src="aa.php" style="cursor: pointer"/>刷新图片，但在FireFox下不行。主要因缓存问题，在地址后加随机数即可解决。编辑onclick事件代码如下： "this.src=this.src+'?'+Math.random()"