IE与Firefox JavaScript及CSS兼容性处理指南

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="">

表单元素访问与集合对象处理

以下是关于其他常见兼容性问题的补充说明：

说明：在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为idName的HTML对象。

变量命名与HTML对象ID冲突处理

说明：在IE中，HTML对象的ID可直接作为document的下属对象变量名使用；在Firefox中则不行。Firefox允许使用与HTML对象ID相同的变量名，而IE不允许。

解决方案：使用document.getElementById("idName")替代document.idName。建议避免使用与HTML对象ID相同的变量名，并在声明变量时统一使用var，以避免歧义。

常量定义与input.type属性差异

说明：在Firefox中，可以使用const或var定义常量；在IE中，仅支持var。

解决方案：统一使用var定义常量。

说明：在IE中，input.type属性为只读；在Firefox中，input.type属性为可读写。

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");

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。

说明：在IE中，event对象有srcElement属性，但没有target属性；在Firefox中，even对象有target属性，但没有srcElement属性。

解决方案：使用obj（obj = event.srcElement ? event.srcElement : event.target;）替代IE下的event.srcElement或Firefox下的event.target。请注意event的兼容性问题。

window.location与窗口打开方式

说明：在IE或Firefox 2.0.x中，可以使用window.location或window.location.href；在Firefox 1.5.x中，仅支持window.location。

解决方案：使用window.location替代window.location.href。

说明：在IE中，可以通过showModalDialog和showModelessDialog打开模态和非模态窗口；在Firefox中不支持。

解决方案：直接使用window.open(pageURL,name,parameters)打开新窗口。

若需将子窗口参数传回父窗口，可在子窗口中使用window.opener访问父窗口。例如：var parWin = window.opener; parWin.document.getElementById("Aqing").value = "Aqing";

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";

body加载时机与父元素获取

Firefox中，body在body标签未被浏览器完全读入前即存在；IE中，body仅在body标签被完全读入后才存在。

IE：document.body.onload = inject; //Function inject()在此前已定义

Firefox：document.body.onload = inject();

IE：obj.parentElement

Firefox：obj.parentNode

解决方案：由于Firefox与IE均支持DOM，建议使用obj.parentNode。

光标样式与文本节点处理

Firefox不支持hand，但IE支持pointer。

解决方案：统一使用pointer。

解决方案：

if(navigator.appName.indexOf("Explorer") > -1){

document.getElementById(&apos;element&apos;).innerText = "my text";

} else{

document.getElementById(&apos;element&apos;).textContent = "my text";

表格操作与CSS样式兼容

解决方案：

//向table追加一个空行：

var row = otable.insertRow(-1);

var cell = document.createElement("td");

cell.innerHTML = " ";

cell.className = "XXXX";

row.appendChild(cell);

padding 5px 4px 3px 1px FireFox无法解释简写,

必须改为 padding-top:5px; padding-right:4px; padding-bottom:3px; padding-left:1px;

CSS透明、圆角与边框处理

样式应写成:list-style:none;margin:0px;padding:0px;

其中margin属性对IE有效，padding属性对FireFox有效

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

FF：opacity:0.6。

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

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;

select操作与XMLHTTP请求

枚举元素除了[]外，selectName.options.item()也可用。此外，selectName.options.length、selectName.options.add/remove在两种浏览器中均可用。注意在add后赋值元素，否则会失败（经测试如此）。

//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()

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);

在IE下可用<img id="pic" onclick= "this.src= &apos;aa.php&apos;" src="aa.php" style="cursor: pointer"/>刷新图片，但在FireFox下不行。主要因缓存问题，在地址后加随机数即可解决。编辑onclick事件代码如下： "this.src=this.src+&apos;?&apos;+Math.random()"