JavaScript与CSS在IE和Firefox中的兼容性问题详解

表单与集合对象访问差异

在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() 方法来获取自定义属性，以确保跨浏览器兼容。

在IE浏览器中，可以使用 eval("idName") 或 getElementById("idName") 来获取ID为 idName 的HTML对象；而在Firefox浏览器中，仅支持使用 getElementById("idName") 方法。

统一使用 getElementById("idName") 方法来获取指定ID的HTML对象。

变量命名与常量定义规范

在IE浏览器中，HTML对象的ID可以直接作为 document 对象的下属变量名使用；而在Firefox浏览器中则不支持此用法。此外，Firefox允许使用与HTML对象ID相同的变量名，而IE则不允许。

建议使用 document.getElementById("idName") 替代直接引用 document.idName 的方式。为避免潜在错误，尽量避免使用与HTML对象ID相同的变量名，并在声明变量时统一添加 var 关键字以消除歧义。

在Firefox浏览器中，可以使用 const 关键字或 var 关键字来定义常量；而在IE浏览器中，仅支持使用 var 关键字来定义常量。

统一使用 var 关键字来定义常量，以确保在IE和Firefox中均能正常运行。

Input属性与事件对象处理

在IE浏览器中，input.type 属性为只读；而在Firefox浏览器中，input.type 属性为可读写。

建议不直接修改 input.type 属性。若必须修改，可先隐藏原有input元素，然后在相同位置插入一个新的input元素。

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)
... 
} 

在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。

在IE浏览器中，event 对象包含 srcElement 属性，但不包含 target 属性；而在Firefox浏览器中，event 对象包含 target 属性，但不包含 srcElement 属性。

可以使用以下代码获取兼容的目标元素：srcObj = event.srcElement ? event.srcElement : event.target;

若需考虑第8条问题，可将 event 替换为 myEvent。

窗口操作与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为例：

<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载入与事件委托机制

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的父节点。

Firefox不支持 hand 属性，但IE支持 pointer 属性，两者均显示手形光标。

统一使用 pointer 属性。

文本内容与宽高赋值

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';。

表格操作与列表样式

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等列表的缩进时，样式应写成：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透明与圆角处理

IE：filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。

FF：opacity:0.6。

[注] 建议两者都写，并将opacity属性放在下面。

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标准，也更具有规范性。