本文详细分析了JavaScript与CSS在IE与Firefox浏览器中的核心差异，涵盖表单访问、事件对象属性、窗口操作及CSS样式处理等常见问题。通过统一使用标准DOM方法和属性，如getElementById、getAttribute及标准CSS属性，可有效解决跨浏览器兼容难题，确保代码在多种环境下稳定运行。
表单与集合对象访问差异
在IE浏览器中，可以通过 document.formName.item("itemName") 或 document.formName.elements["elementName"] 两种方式访问表单元素；而在Firefox浏览器中，仅支持使用 document.formName.elements["elementName"] 这一种方式。
为确保兼容性，建议统一采用 document.formName.elements["elementName"] 来访问表单元素。
二、集合类对象问题
IE浏览器允许使用小括号 () 或方括号 [] 来获取集合类对象，而Firefox浏览器仅支持使用方括号 [] 来获取集合类对象。
为保持代码一致性，统一使用方括号 [] 来获取集合类对象。
三、自定义属性问题
自定义属性与ID获取方法
在IE浏览器中，可以通过常规属性访问方法获取自定义属性，也可以使用 getAttribute() 方法获取；而在Firefox浏览器中，必须使用 getAttribute() 方法来获取自定义属性。
统一通过调用 getAttribute() 方法来获取自定义属性，以确保跨浏览器兼容。
四、eval("idName")问题
在IE浏览器中，可以使用 eval("idName") 或 getElementById("idName") 来获取ID为 idName 的HTML对象；而在Firefox浏览器中，仅支持使用 getElementById("idName") 方法。
统一使用 getElementById("idName") 方法来获取指定ID的HTML对象。
五、变量名与某HTML对象ID相同的问题
变量命名与常量定义规范
在IE浏览器中，HTML对象的ID可以直接作为 document 对象的下属变量名使用；而在Firefox浏览器中则不支持此用法。此外，Firefox允许使用与HTML对象ID相同的变量名，而IE则不允许。
建议使用 document.getElementById("idName") 替代直接引用 document.idName 的方式。为避免潜在错误，尽量避免使用与HTML对象ID相同的变量名，并在声明变量时统一添加 var 关键字以消除歧义。
六、const问题
在Firefox浏览器中，可以使用 const 关键字或 var 关键字来定义常量；而在IE浏览器中，仅支持使用 var 关键字来定义常量。
统一使用 var 关键字来定义常量，以确保在IE和Firefox中均能正常运行。
七、input.type属性问题
Input属性与事件对象处理
在IE浏览器中，input.type 属性为只读；而在Firefox浏览器中，input.type 属性为可读写。
建议不直接修改 input.type 属性。若必须修改，可先隐藏原有input元素，然后在相同位置插入一个新的input元素。
八、window.event问题
window.event 对象仅在IE浏览器中可用，而在Firefox浏览器中不可用，这是因为Firefox中的 event 对象仅在事件发生的现场可用。
在事件处理函数中添加 event 参数，并在函数体内（假设形参为 evt）使用以下代码进行兼容处理：var myEvent = evt ? evt : (window.event ? window.event : null)。
示例：
代码如下:
<input type="button" onclick="doSomething(event)"/>
<script language="javascript">
function doSomething(evt) {
var myEvent = evt ? evt : (window.event ? window.event : null)
...
} 九、event.x与event.y问题
在IE浏览器中，event 对象包含 x 和 y 属性，但不包含 pageX 和 pageY 属性；而在Firefox浏览器中，event 对象包含 pageX 和 pageY 属性，但不包含 x 和 y 属性。
可以使用以下代码获取兼容的坐标值：var myX = event.x ? event.x : event.pageX; var myY = event.y ? event.y : event.pageY;
若需考虑第8条问题，可将 event 替换为 myEvent。
十、event.srcElement问题
在IE浏览器中，event 对象包含 srcElement 属性，但不包含 target 属性；而在Firefox浏览器中，event 对象包含 target 属性，但不包含 srcElement 属性。
可以使用以下代码获取兼容的目标元素：srcObj = event.srcElement ? event.srcElement : event.target;
若需考虑第8条问题，可将 event 替换为 myEvent。
十一、window.location.href问题
窗口操作与Frame访问
在IE或Firefox 2.0.x版本中，可以使用 window.location 或 window.location.href；而在Firefox 1.5.x版本中，仅支持使用 window.location。
建议使用 window.location 替代 window.location.href，或考虑使用 location.replace() 方法。
十二、模态和非模态窗口问题
在IE浏览器中，可以通过 showModalDialog 和 showModelessDialog 方法打开模态和非模态窗口；而在Firefox浏览器中不支持此功能。
直接使用 window.open(pageURL, name, parameters) 方法打开新窗口。
若需将子窗口中的参数传递回父窗口，可在子窗口中使用 window.opener 访问父窗口。若需父窗口控制子窗口，可使用 var subWindow = window.open(pageURL, name, parameters); 获取新窗口对象。
十三、frame和iframe问题
以frame为例：
<frame src="http://www.52css.com/123.html" id="frameId" name="frameName" />
(1)访问frame对象
在IE浏览器中，使用 window.frameId 或 window.frameName 来访问该frame对象；
在Firefox浏览器中，使用 window.frameName 来访问该frame对象；
统一使用 window.document.getElementById("frameId") 来访问该frame对象。
(2)切换frame内容
在IE和Firefox浏览器中，均可使用 window.document.getElementById("frameId").src = "52css.com.html" 或 window.frameName.location = "52css.com.html" 来切换frame内容；
若需将frame中的参数传回父窗口，可在frame中使用 parent 关键字访问父窗口。
十四、body载入问题
Body载入与事件委托机制
Firefox浏览器中的body对象在body标签未被浏览器完全读入前即存在；而IE浏览器中的body对象必须在body标签被浏览器完全读入后才存在。
[注] 此问题尚未实际验证，待验证后再行修改。
[注] 经实际验证，在IE6、Opera9及Firefox2中均不存在上述问题，单纯的JS脚本可访问在脚本之前已载入的所有对象和元素，即使该元素尚未完全载入。
十五、事件委托方法
在IE浏览器中，使用 document.body.onload = inject;（其中 function inject() 已在此前定义）；在Firefox浏览器中，使用 document.body.onload = inject();。
统一使用 document.body.onload = new Function('inject()'); 或 document.body.onload = function(){/* 这里是代码 */}。
[注意] Function 和 function 的区别
十六、访问的父元素的区别
节点访问与光标样式
在IE浏览器中，使用 obj.parentElement 或 obj.parentNode 访问obj的父节点；在Firefox浏览器中，使用 obj.parentNode 访问obj的父节点。
由于Firefox与IE均支持DOM，统一使用 obj.parentNode 访问obj的父节点。
十七、cursor:hand VS cursor:pointer
Firefox不支持 hand 属性，但IE支持 pointer 属性，两者均显示手形光标。
统一使用 pointer 属性。
十八、innerText的问题.
文本内容与宽高赋值
innerText 在IE浏览器中能正常工作，但在Firefox浏览器中无法正常工作。
在非IE浏览器中使用 textContent 代替 innerText。
示例：
代码如下:
if(navigator.appName.indexOf("Explorer") >-1){
document.getElementById('element').innerText = "my text";
} else{
document.getElementById('element').textContent = "my text";
}[注] innerHTML 同时被IE、Firefox等浏览器支持，其他如 outerHTML 等仅被IE支持，建议尽量避免使用。
十九、对象宽高赋值问题
在Firefox浏览器中，类似 obj.style.height = imgObj.height 的语句无效。
统一使用 obj.style.height = imgObj.height + 'px';。
二十、Table操作问题
表格操作与列表样式
IE、Firefox及其他浏览器对 table 标签的操作各不相同，在IE中不允许对table和tr的innerHTML赋值，使用js增加一个tr时，使用appendChild方法也不管用。
解决方法：
代码如下:
//向table追加一个空行：
var row = otable.insertRow(-1);
var cell = document.createElement("td");
cell.innerHTML = "";
cell.className = "XXXX";
row.appendChild(cell);[注] 由于很少使用JS直接操作表格，此问题未遇到过。建议使用JS框架集来操作table，如JQuery。
二一、ul和ol列表缩进问题
消除ul、ol等列表的缩进时，样式应写成：list-style:none;margin:0px;padding:0px;
其中margin属性对IE有效，padding属性对Firefox有效。← 此句表述有误，详细见↓
[注] 此问题尚未实际验证，待验证后再行修改。
[注] 经实际验证，在IE中，设置margin:0px可去除列表的上下左右缩进、空白以及列表编号或圆点，设置padding对样式无影响；在Firefox中，设置margin:0px仅可去除上下空白，设置padding:0px后仅可去除左右缩进，还必须设置list-style:none才能去除列表编号或圆点。即在IE中仅设置margin:0px即可达到最终效果，而在Firefox中必须同时设置margin:0px、padding:0px及list-style:none三项才能达到最终效果。
二二、CSS透明问题
CSS透明与圆角处理
IE：filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。
FF：opacity:0.6。
[注] 建议两者都写，并将opacity属性放在下面。
二三、CSS圆角问题
IE：IE7以下版本不支持圆角。
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;。
[注] 圆角问题是CSS中的经典问题，建议使用JQuery框架集来设置圆角，将复杂问题留给框架处理。
CSS中的问题繁多，甚至相同的CSS定义在不同页面标准中显示效果各异。更多知识请参考52CSS.com的文章。一个合乎发展的建议是，页面采用标准DHTML标准编写，较少使用table，CSS定义尽量依照标准DOM，同时兼顾IE、Firefox、Opera等主流浏览器。BTW，许多情况下，FF和Opera的CSS解释标准更贴近CSS标准，也更具有规范性。