JavaScript在IE与Firefox兼容性详解及解决方案

浏览器调试工具推荐与配置

推荐在Firefox环境中使用Firebug插件进行JavaScript调试，该工具功能强大，能有效辅助代码排查。

Firebug支持为JavaScript代码设置断点，允许开发者逐步执行并观察运行状态。

在调试过程中，可以实时修改CSS样式，直观查看样式变更对页面的影响。

该工具还能查看DOM模型，帮助理解页面结构与元素层级关系。

IE8自带的Developer Bar工具表现也不错，可作为备选调试方案。

若要开启Firefox中所有JavaScript警告，可在地址栏输入about:config，找到javascript.options.strict并双击将其值设为true。此举能显示更多警告信息，有助于发现潜在错误。

JavaScript DOM与对象处理差异

以下是从IE迁移至Firefox时需关注的JavaScript类兼容性问题汇总。

在IE中使用document.all("id")获取元素，在Firefox中应改为document.getElementById("id")。建议尽量使用id属性标识控件，而非name属性。

提示：如果控件仅有name属性而无id属性，在IE中使用getElementById仍可找到对象，但在Firefox中会返回NULL。

获取表单内特定元素的方法为：elForm.elements['name']。

在IE中访问集合元素时，支持[]和()两种写法；但Firefox仅支持[]。例如，table.rows(5).cells(0)在Firefox中需改为table.rows[5].cells[0]。

判断对象是否为object类型时，应使用if(typeof 对象变量 == "object")，而非if(对象变量 == "[object]")。

在IE中eval(对象名称)常用于获取元素，Firefox同样支持eval函数，但需注意具体用法差异。

在IE中可直接通过对象id调用属性（如对象id.value=""），但在Firefox中应改为document.getElementById("name").value=""。

在IE中可使用obj.insertAdjacentElement("beforeBegin", objText)插入元素。

在Firefox中，应改为使用obj.parentNode.insertBefore(objText, obj)。

Firefox的createElement方法不支持直接插入HTML代码字符串。

若需插入HTML代码，可考虑使用document.write(esHTML)。

或者先创建元素再设置属性。对于input元素，需先设置type属性，再加入DOM树。例如：var obj = createElement("input"); obj.type = "checkbox";。

随后获取目标节点：var obj2 = document.getElementById("id2"); obj2.parentNode.insertBefore(obj, obj2);。

若直接插入HTML代码，可尝试使用createContextualFragment方法。

在IE中使用innerText，在Firefox中应改为textContent。

Firefox对对象名称中的$符号识别存在问题，建议将objName="t1$spin"改为objName="t1_spin"。

在Firefox中，若通过setAttribute将对象设为属性，再取出时对象属性会丢失。例如：objText.setAttribute("obj", obj);。

此时alert(obj.id)显示正确名称，但obj = objText.getAttribute("obj")后，alert(obj.id)返回null。

在IE下此操作正常，但在Firefox中，setAttribute的第二个参数始终被视为字符串。若传入对象，相当于调用其toString()方法。

解决方法是使用直接赋值方式：objText.dropdown_select = obj; obj = objText.dropdown_select。

在IE中使用className，在Firefox中应使用class。由于class是关键字，需通过setAttribute/getAttribute操作：setAttribute("class", "css样式名称")。

在HTML中定义的自定义属性，必须通过getAttribute获取。例如：<td id="TD1" isOBJ="true">。

在IE中，document.getElementByID("TD1").isOBJ可直接返回属性值；但在Firefox中，此方式总返回undefined。

应改为：document.getElementByID("TD1").getAttribute("isOBJ")。

在Firefox中，select控件不再默认置顶显示，可能需要设置zIndex属性。在IE中覆盖select控件的常用方法是使用iframe。

在Firefox中，判断undefined时，undefined、null、false、0的值等同，需注意逻辑判断。

若Firefox中调用obj.focus()报错，可尝试改为：window.setTimeout(function(){obj.focus();}, 20);。

在Firefox中，keyCode为只读属性，如何实现回车转Tab或录入时键值转换？

变通方法1：回车跳转需自行编写跳转处理代码。遍历DOM中所有元素，找到当前元素的下一个可聚焦元素并设置焦点。

变通方法2：在可录入控件中，将选中部分替换为新录入内容：var text = String.fromCharCode(event.keyCode); 同时阻止按键事件上传，调用event.preventDefault()。

在Firefox中，<button>可能被解释为提交表单或刷新页面。需编写标准的<button type="button">，或在onclick中调用原函数后添加return false;。

在Firefox中，document.onfocus可能无法获取实际获得焦点的控件，而document.keydown可以。

在IE中使用children，在Firefox中应改为childNodes。

在IE中使用sytle.pixelHeight，在Firefox中应改为style.height。

判断函数或变量是否存在的方法为：if(!("varName" in window)) var VarName = 1;。

获取窗口宽度时，需注意DOCTYPE声明的影响。

若HTML包含<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">。

则应使用document.documentElement.clientWidth获取窗口宽度。

IE中支持window.createPopup方法。

Firefox不支持此方法。

IE中监听document.body.onresize事件。

Firefox不支持此监听方式。

应改为使用window.onresize。

注意，页面打开时不会触发onresize事件，需在onload中调用一次。

关于Box模型的问题。

IE默认使用content-box模型，为统一标准，可设置：

div, td {-moz-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0;}。

也可在文档头加入DOCTYPE声明：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">。

但这可能对旧版IE代码产生较大影响。

事件注册与触发机制对比

关于事件注册。

IE中使用attachEvent。

Firefox中使用addEventListener("blur", myBlur, false);。

第一个参数为事件名称，无需带"on"前缀。

第三个参数false代表事件传递从事件对象沿DOM树向body方向传播。

关于事件触发。

IE中使用obj.fireEvent("onclick");。

Firefox中：

var e = document.createEvent("Events");。

e.initEvent("click", true, false);。

element.dispatchEvent(event)。

在事件处理函数中获取对象句柄的方法。

var oThis = this;。

obj.onfocus = function(evt) {。

oThis.doOnFocus(evt);。

}

统一事件处理框架代码示例。

doOnFocus(evt) {。

evt = evt || window.event;。

var el = evt.target || evt.srcElement;。

// 后续处理。

}

Firefox不支持onpropertychange事件。

但在Firefox中可定义属性的setter方法，如下：

HTMLElement.prototype.__defineSetter__("readOnly", function(readOnly) {。

// 构造虚拟的event对象。

var evt = [];。

evt["target"] = this;。

evt["propertyName"] = 'readOnly'。

// onpropertychange函数需定义evt参数，参考统一事件处理框架代码。

if(this.onpropertychange) this.onpropertychange(evt);。

});

CSS样式与属性兼容性问题

});。

以下是从IE迁移至Firefox时需关注的CSS类兼容性问题汇总。

在IE中使用cursor:hand，在Firefox中应改为cursor:pointer。

Firefox不支持expression。

在IE中，expression非常消耗CPU，不应使用。

为达到较好效果，应建立自己的expression to JavaScript处理函数，这样在IE和Firefox中均可使用。

Firefox不支持FILTER。

例如filter: Alpha(Opacity=50);。

应替换为：

-moz-opacity: 0.5;。

Firefox不支持text-overflow属性。

Firefox不支持transparent属性直接通过setAttribute设置。

在Firefox中，obj.setAttribute("bgColor", "#ffffff")仅支持颜色值。

必须使用obj.style.backgroundColor = "transparent"。

Firefox中text控件高度与IE不同，需统一样式。

input[type=text] {。

height: 20px;。

height:20px;

}

在IE中，font属性对body和td等元素不起作用，但在Firefox中有效。

统一使用font-family属性。

以上为常见兼容性问题及解决方案，实际开发中需结合具体场景调整。