下面列出JS在IE和FF下不兼容的方法
1、Dom操作
var wrongGet = obj.firstChild;
var wrongGet = obj.lastChild;
var wrongGet = obj.nextSibling;
var wrongGet = obj.childNodes;
var wrongGet = obj.previousSibling;
2、HTML控件如果没有ID，应该加上id属性:
Not compatible:
tmpHtml.Append("<input type=\"text\"name=\"" + str1 + "\"value=\"0\">");
Compatible:
tmpHtml.Append("<input type=\"text\"name=\"" + str1 + "\" id=\"" + str1 + "\" value=\"0\">");
3、不要用eval,而改为getElementById,eval在IE下可以使用，但FF里有时不支持或转换出错:
Not compatible:
objField1 = eval("document.mainform.meritid"+ i);
Compatible:
objField1 = document.getElementById("meritid"+ i);(always could not get the object).
1、 表格操作,改aRow(i).cells为aRows[i].cells
Not compatible:
aRows(i).cells
Compatible:
aRows[i].cells
2、 自定义属性使用标准get或set获取和设置:
Not compatible:
varstr = Obj.customizedvalue;
Compatible:
varstr = Obj.getAttribute(“customizedvalue”);
var str = Obj.setAttribute(“customizedvalue”);
3、 移除select控件时，使用:
Not compatible:
oSel.options.remove(oSel.selectedIndex);
Compatible:
oSel.remove(oSel.selectedIndex);
4、 FF样式不支持expression表达式，改用JS方法;
Not compatible:
top: expression(parentNode.parentNode.parentNode.parentNode.scrollTop);
width:expression(document.getElementById('CenterDIV').offsetWidth-16+'px');
Compatible:
改用JS方法;
5、 FF不支持onmouseleave事件，改用onmouseout事件:
Not compatible:
div.attachEvent("onmouseleave",new Function("clearPopUpMenu();"));
Compatible:
If(window.isIE)
div.attachEvent("onmouseleave",newFunction("clearPopUpMenu();"));
else
div.attachEvent("onmouseout",new Function("clearPopUpMenu();"));
9、FF不支持document.readyState!="complete"
10、FF不支持window.createPopup();
11、FF不支持document.body.scrollLeft
Not compatible:
var _left = document.body.scrollLeft;
Compatible:
var _left = document.documentElement.scrollLeft;
FF使用下列属性时要小心:
scrollHeight|scrollLeft|scrollTop|scrollWidth
12、FF指定宽度或高度为像素时要加”px”:
Not compatible:
document.GetElementById(strObjId).style.width= 10;
Compatible:
document.GetElementById(strObjId).style.width= ‘10px’;
13、style=”cursor:hand” 应该为 style=”cursor:pointer”
Not compatible:
style=”cursor:hand”
Compatible:
style=”cursor:pointer”
14、alt后必须加title:
Not compatible:
sbdTempHtml.Append("<img src=\"../Graphics/i_expand.gif\"/></div>");
Compatible:
sbdTempHtml.Append("<img alt=\"\"title=\"\" src=\"../Graphics/i_expand.gif\"/></div>");
15、在tr里,FF不支持“display:block”
Not compatible:
document.getElementById("hrmtr").style.display = "block";
Compatible:
document.getElementById("hrmtr").style.display= "";
16、FF使用滤镜功能时,要设置透明度
Not compatible:
filter:alpha(opacity=50);
Compatible:
filter:alpha(opacity=50);
-moz-opacity:0.5; /*css*/
/*The way in js*/
if (!window.isIE)
obj.style.MozOpacity = 0.5;
17、全选
在IE里我们可以用 “objInput.select()” 选中textbox里的值. 但在FF只能用focus().
Compatible:
if( window.isIE )
{
document.mainform.elements[checkCategory].select();
}
else
{
document.getElementById(“checkCategory”).focus();
}
18、用js插入行或列时应注意:
Not compatible:
tr = tab.insertRow();
td = tr.insertCell();
Compatible:
tr = tab.insertRow(-1);
td = tr.insertCell(-1);
19、我们常常设置表格宽度和高度少于20px时，往往在FF里没有效果：
Not Compatible:
<tr bgcolor="#000000"><tdcolspan="3"><img height="1" width="1" src="/clear.gif"/></td></tr>
Compatible:
<trbgcolor="#000000"><td colspan="3"><imgheight="1px" width="1px" style="display: block;" src="/clear.gif"/></td></tr>
20、在IE里插入空白行时不会显示，但在FF里会显示出来
Not Compatible:
sbdTempHtml.Append("<tr>");
sbdTempHtml.Append("</tr>");
Compatible:
sbdTempHtml.Append("<!--[ifgte IE 6 & lte IE 7]>");
sbdTempHtml.Append("<tr>");
sbdTempHtml.Append("</tr>");
sbdTempHtml.Append("<![endif]-->");
21、在IE里document.mainform.elements[“…”]可以取到对象，但FF不行:
Not Compatible:
document.mainform.elements[“imgID”]
document.getElementById(“imgID”)
22、FF里有textContent属性，但IE只有innerText
Not Compatible:
div.innerText
Compatible
if(window.isIE)
{div.innerText}
else
{div.textContent}
23、在IE，attachEvent可以正常使用，但FF里有时不行，比如在iframe里:
Not Compatible:
obj.contentWindow.document.attachEvent("onkeyup",function(){updateCharCount(obj.id);});
Compatible
if(window.isIE)
{
obj.contentWindow.document.attachEvent("onkeyup",function(){updateCharCount(obj.id);});
}
else
{
obj.contentWindow.document.addEventListener("keyup",function(){updateCharCount(obj.id);},false);
}
24、runtimeStyle不支持，应改为style
25、window.execScript 不支持
var jsCode = "var a = 1;";
if (window.execScript) {
window.execScript(jsCode, "JavaScript");
} else {
window.eval(jsCode);
}
26、obj.style.display=”block”不支持，应为obj.style.display=””
27、document.createElement在FF和Safari里不支持直接传入HTML,如:
Not Compatible:
document.createElement("<iframe id=iframe1name=iframe1 width=0 height=0></iframe>");
Compatible
var iframeObj = (document.all)?document.createElement("<iframe id=iframe1 name=iframe1 width=0height=0></iframe>"):document.createElement('iframe');
iframeObj.name="iframe1";
iframeObj.id="iframe1";
iframeObj.width=0;
iframeObj.height=0;
document.body.appendChild(iframeObj);
28、在IpadSafari里，不支持滚动条overflow.
29、在IpadSafari里,不支持下载
if (!navigator.userAgent.match(/iPad/i)) {
NotCompatible:
f.src=url;
}
else
{
Compatible
window.open(url);
}
更多详细请google文章:Jscript Deviations from ES3
IE8里的64个BUG:
http://www.gtalbot.org/BrowserBugsSection/MSIE8Bugs/
1 常见JavaScript兼容性问题
集合类对象问题
现有代码中存在许多document.form.item("itemName") 这样的语句，不能在 FF 下运行
解决方法：
改用document.form.elements["elementName"]
说明:IE下,可以使用()或[]获取集合类对象;Firefox下,只能使用[]获取集合类对象.
解决方法:统一使用[]获取集合类对象.
window.event
现有问题：
使用 window.event 无法在 FF 上运行
解决方法：
FF 的 event 只能在事件发生的现场使用，此问题暂无法解决。可以这样变通：
原代码(可在IE中运行)：
<input type="button" name="someButton"value="提交"οnclick="javascript:gotoSubmit()"/>
<script language="javascript">
function gotoSubmit() {
alert(window.event); // use window.event
}
</script>
新代码(可在IE和FF中运行)：
<input type="button" name="someButton"value="提交"οnclick="javascript:gotoSubmit(event)"/>
<script language="javascript">
function gotoSubmit(e) {
e = e? e : (window.event? window.event : null);
alert(e);
}
</script>
此外，如果新代码中第一行不改，与老代码一样的话（即 gotoSubmit调用没有给参数），则仍然只能在IE中运行，但不会出错。所以，这种方案 tpl 部分仍与老代码兼容。
HTML 对象的 id 作为对象名的问题
现有问题：
在 IE 中，HTML 对象的 ID 可以作为 document 的下属对象变量名直接使用。在 FF 中不能。
解决方法：
用 getElementById("idName")代替 idName 作为对象变量使用。
用idName字符串取得对象的问题
现有问题：
在IE中，利用 eval(idName) 可以取得 id 为 idName 的 HTML 对象，在FF 中不能。
解决方法：
用 getElementById(idName) 代替 eval(idName)。
变量名与某 HTML 对象 id 相同的问题
现有问题：
在 FF 中，因为对象 id 不作为 HTML 对象的名称，所以可以使用与 HTML 对象 id 相同的变量名，IE 中不能。
解决方法：
在声明变量时，一律加上 var ，以避免歧义，这样在 IE 中亦可正常运行。
此外，最好不要取与 HTML 对象 id 相同的变量名，以减少错误。
event.x 与 event.y 问题
现有问题：
在IE 中，event 对象有 x, y 属性，FF中没有。
解决方法：
在FF中，与event.x 等效的是 event.pageX。但event.pageX IE中没有。
故采用 event.clientX 代替 event.x。在IE 中也有这个变量。
event.clientX 与 event.pageX 有微妙的差别（当整个页面有滚动条的时候），不过大多数时候是等效的。
如果要完全一样，可以稍麻烦些：
mX = event.x ? event.x : event.pageX;
然后用 mX 代替 event.x
其它：
event.layerX 在 IE 与 FF 中都有，具体意义有无差别尚未试验。
关于frame
现有问题：
在 IE中可以用window.testFrame取得该frame，FF中不行
解决方法：
在frame的使用方面FF和ie的最主要的区别是：
如果在frame标签中书写了以下属性：
<frame src="/xx.htm" id="frameId"name="frameName" />
那么ie可以通过id或者name访问这个frame对应的window对象
而FF只可以通过name来访问这个frame对应的window对象
例如如果上述frame标签写在最上层的window里面的htm里面，那么可以这样访问
IE：window.top.frameId或者window.top.frameName来访问这个window对象
FF： 只能这样window.top.frameName来访问这个window对象
另外，在FF和ie中都可以使用window.top.document.getElementById("frameId")来访问frame标签
并且可以通过window.top.document.getElementById("testFrame").src= 'xx.htm'来切换frame的内容
也都可以通过window.top.frameName.location= 'xx.htm'来切换frame的内容
父结点的问题
在FF中没有 parentElement parentElement.children 而用 parentNode parentNode.childNodes
childNodes的下标的含义在IE和FF中不同，FF使用DOM规范，childNodes中会插入空白文本节点。
一般可以通过node.getElementsByTagName()来回避这个问题。当html中节点缺失时，IE和FF对parentNode的解释不同，例如
<form>
<table>
<input/>
</table>
</form>
FF中input.parentNode的值为form, 而IE中input.parentNode的值为空节点
FF中节点没有removeNode方法，必须使用如下方法node.parentNode.removeChild(node)
const 问题
现有问题：
在 IE 中不能使用 const 关键字。如 const constVar = 32; 在IE中这是语法错误。
解决方法：
不使用 const ，以 var 代替。
body 对象
FF的body在body标签没有被浏览器完全读入之前就存在，而IE则必须在body完全被读入之后才存在
URLencoding
在js中如果书写url就直接写&不要写&例如var url ='xx.jsp?objectName=xx&objectEvent=xxx';
frm.action = url那么很有可能url不会被正常显示以至于参数没有正确的传到服务器
一般会服务器报错参数没有找到
当然如果是在tpl中例外，因为tpl中符合xml规范，要求&书写为&
一般FF无法识别js中的&
nodeName 和 tagName 问题
现有问题：
在FF中，所有节点均有 nodeName 值，但 textNode 没有 tagName 值。在 IE 中，nodeName 的使用好象有问题
解决方法：
使用 tagName，但应检测其是否为空。
元素属性
IE下 input.type属性为只读，但是FF下可以修改
document.getElementsByName() 和 document.all[name] 的问题
在 IE 中，getElementsByName()、document.all[name] 均不能用来取得多个具有相同name的div 元素集合。
兼容firefox的 outerHTML，FF中没有outerHtml的方法
if (window.HTMLElement) {
HTMLElement.prototype.__defineSetter__("outerHTML",function(sHTML){
varr=this.ownerDocument.createRange();
r.setStartBefore(this);
vardf=r.createContextualFragment(sHTML);
this.parentNode.replaceChild(df,this);
return sHTML;
});
HTMLElement.prototype.__defineGetter__("outerHTML",function(){
var attr;
varattrs=this.attributes;
varstr="<"+this.tagName.toLowerCase();
for (vari=0;i<attrs.length;i++) {
attr=attrs[i];
if(attr.specified)
str+=""+attr.name+'="'+attr.value+'"';
}
if(!this.canHaveChildren)
returnstr+">";
returnstr+">"+this.innerHTML+"</"+this.tagName.toLowerCase()+">";
});
HTMLElement.prototype.__defineGetter__("canHaveChildren",function(){
switch(this.tagName.toLowerCase()) {
case"area":
case"base":
case"basefont":
case "col":
case"frame":
case "hr":
case "img":
case "br":
case"input":
case"isindex":
case"link":
case"meta":
case"param":
return false;
}
return true;
});
}
自定义属性问题
说明:IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性;FF下,只能使用getAttribute()获取自定义属性.
解决方法:统一通过getAttribute()获取自定义属性.
event.srcElement问题
说明:IE下,even对象有srcElement属性,但是没有target属性;Firefox下,even对象有target属性,但是没有srcElement属性.
解决方法:使用obj(obj = event.srcElement ? event.srcElement : event.target;)来代替IE下的event.srcElement或者Firefox下的event.target.
window.location.href问题
说明:IE或者Firefox2.0.x下,可以使用window.location或window.location.href;Firefox1.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";
事件委托方法
IE：document.body.οnlοad= inject; //Function inject()在这之前已被实现
FF：document.body.οnlοad= inject();
如果要加传递参数，可以做个闭包
(function(arg){
document.body.οnlοad=function(){inject(arg);};
})(arg)
innerText在IE中能正常工作，但是innerText在FireFox中却不行.
解决方法:
if(navigator.appName.indexOf("Explorer") > -1){
document.getElementById('element').innerText = "my text";
} else{
document.getElementById('element').textContent = "my text";
}
FF中类似 obj.style.height = imgObj.height 的语句无效
解决方法：
obj.style.height = imgObj.height + 'px';
IE,FF以及其它浏览器对于 table 标签的操作都各不相同，在ie中不允许对table和tr的innerHTML赋值，使用js增加一个tr时，使用appendChile方法也不管用
解决方法：
//向table追加一个空行：
var row = otable.insertRow(-1);
var cell = document.createElement("td");
cell.innerHTML = " ";
cell.className = "XXXX";
row.appendChild(cell);
74
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
