js兼容问题

1.HTML对象获取问题

FireFox:document.getElementById(“idName”);
IE:document.idname或者document.getElementById(“idName”)
解决办法：统一使用document.getElementById(“idName”);

2.const问题

FireFox下，可以使用const关键字或var关键字来定义常量；
IE下，只能使用var关键字来定义常量
解决办法：统一使用var关键字来定义常量

3.event.x和event.y问题

说明：
IE下，event对象有x，y属性，但是没有pageX，pageY属性；
Firefox下，event对象有pageX，pageY属性，但是没有x，y属性
解决办法：使用mX(mX=event.x?event.x:event.pageX;)来代替IE下的event.x或者Firefox下的event.pageX.

4.window.location.href问题

说明：
IE或者Firefox2.0.x下，可以使用window.location或window.location.href;
Firefox1.5.x下，只能使用window.location
解决办法：使用window.location来代替window.location.href

5.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.ducument.getElementById(“testFrame”).src="xxx.html"或window.frameName.location="xxx.html"来切换frame的内容。如果只需要将frame中的参数传回父窗口（注意不是opener，而是parent frame），可以再frame中使用parent来访问父窗口。例如：parent.document.form1.filename.value=“Aqing”

6.模态和非模态窗口问题

说明：
IE下，可以通过showModal Dialog和showModelessDialog打开模态和非模态窗口；Firefox下则不能。
解决方法：直接使用window.open(pageURL,name.parameters)方式打开新窗口。如果需要将子窗口中的参数传递回父窗口，可以再子窗口中使用window.opener来访问父窗口，例如：
var parWin window.opener;
parWin.document.getElementById(“Aqing”).value=“Aqing”;

7.firefox与IE的父元素（parentElement）的区别

IE：obj.parentElement
FireFox：obj.parentNode
解决方法：因为Firefox与IE都支持DOM，因此使用obj.parentNode是不错的选择。

8.document.formName.item(“itemName”)问题

问题说明：
IE下，可以使用document.formName.item(“itemName”)或document.formName.elements[“elementName”];
FireFox下 ，只能使用document.formName.elements[“elementName”].
解决方法：统一使用document.formName.elements[“elementName”]

9.集合类对象问题

问题说明：
IE下，可以使用()或[ ]获取集合类对象
Firefox下，只能使用[ ]获取集合类对象
解决方法：统一使用[ ]获取集合类对象

10.自定义属性问题

问题说明:
IE下，只能使用获取常规属性的方法来获取自定义属性，也可以使用getAttribute()获取自定义属性；
Firefox下，只能使用getAttribute()获取自定义属性。
解决方法：统一通过getAttribute()获取自定义属性。

11.input.type问题

问题说明：
IE下input.type属性为只读；但是FIrefox下input.type属性为读写。
解决方法：不修改input.type属性。如果必须要修改，可以先隐藏原来的input，然后在同样的位置再插入一个新的input元素。

12.event.srcElement问题

问题说明：
IE下，even对象有srcElement属性，但是没有target属性；
FireFox下，even对象有target属性，但是没有srcElement属性
解决方法：使用srcObj=event.srcElement?event.srcElement:event.target;如果考虑第8条问题，就改用myEvent代替event即可

13，body载入问题

问题说明：
Firefox的body对象在body标签没有被浏览器完全读入之前就存在；而IE的body对象则必须在body标签被浏览器完全读入之后才存在。
【注】这个问题尚未实际验证，
【注】经验证，IE6、Opera9以及Firefox2中不存在上述问题，单纯的js脚本可以访问在脚本之前已经载入的所有对象和元素，即使这个元素还没有载入完成

14.事件委托方法

问题说明：
IE下，使用document.body.onload = inject;其中function inject()在这之前已被实现；
Firefox下，使用document.body.onload = inject();
解决方法：统一使用document.body.onload = new Function(‘inject()’);或者document.body.οnlοad=function(){}
【注意】Function 和 function的区别

15.Table操作问题

问题说明：
IE、Firefox以及其他浏览器对于table标签的操作都各不相同，在IE中不允许对table和tr的innerHTML赋值，使用js增加一个tr时，使用appendChild方法也不管用。
解决方法：向table追加一个空行：
var row = otable.insertRow(-1);
var cell = document.cteateElement(“td”);
cell.innerHTML = “”;
cell.className = “xxxx”;
row.appendChild(cell);
【注】建议使用js框架来操作table，如jQuery。

16.对象宽高赋值问题

问题说明：
Firefox中类似obj.style.height = imgObj.height的语句无效
Ø CSS
cursor:hand VS cursor:pointer firefox 不支持 hand，但ie支持pointer
解决方法：统一使用pointer

17.innerText 在IE中能正常工作，但在FIrefox中却不行

需用textContent。
解决方法：

if(navigator.appName.indexOf("Explorer")>-1){
	document.getElementById('element').innerText="my text";
}else{
	document.getElementById('element').textContent = "my text";
}

18.js兼容文件

使IE5，IE6兼容IE7模式

<!-[if it IE 7]>
‹script src=”http://ie7-js.googlecode.com/svn/version/2.0(beta)/IE7.js” type=”text/javascript”›‹/script›
<![endif]->

使IE5，IE6，IE7兼容IE8模式

‹!–[if lt IE 8]›
‹script src=”http://ie7-js.googlecode.com/svn/version/2.0(beta)/IE8.js” type=”text/javascript”›‹/script›
‹![endif]–›

使IE5，IE6，IE7,IE8兼容到IE9模式

‹!–[if lt IE 9]›
‹script src=”http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js”›‹/script›
‹![endif]–›

19.浏览器识别符

p{ _color:red; } IE6 专用
*html p{ color:#red; } IE6 专用
p{ +color:red; } IE6,7 专用

p{ *color:red; } IE6,7 专用

html p{ color:red; } IE6,7 专用
p{+color: red;} IE7 专用
Body› p{ color: red; } 屏蔽 IE6
p{ color:red\9; } IE8
Firefox: -moz-
Safari: -webkit-
Opera: -o-
IE: -ms-

20.ul设置的说明

ul一般设置：

list-style-type:none;
margin:0px;
padding:0px;

li一般设置

list-style-type:none;
list-style-position:outside;

21.document.form.item问题

代码中存在document.formName.item(“itemName”)这样的语句，不能在FF下运行
解决方法：改用document.formName.elements[“elementName”]

22.HTML对象的id作为对象名的问题

在IE中，HTML对象的ID可以作为document的下属对象变量名直接使用，在FF中不能
解决方法：使用对象变量时全部用标准的getElement ById(“idName”)

23.用idName字符串取得对象的问题

在IE中，利用eval_r(“idName”)可以取得id为IDName的HTML对象，在FF中不能
解决方法：用getElementById(“idName”)代替eval_r(“idName”)

24.变量名与某HTML对象id相同的问题

在FF中，因为对象id不作为HTML对象的名称，所以可以使用与HTML对象id相同的变量名，IE中不能
解决方法：在声明变量时，一律加上var，以避免歧义，这样在IE中亦可正常运行 最好不要取与HTML对象id相同的变量名，以减少错误

25.在 FF 中没有 parentElement，parement.children 而用 parentNode，parentNode.childNodes

childNodes的下标的含义在IE和FF中不相同，FF的childNodes中会插入空白文本节点
解决方法
可以通过node.getElementsByTagName_r()来回避这个问题

当HTML中节点缺失时，IE和FF对parentNode的解释不同，例如：
‹form›
‹table›
‹input/›
‹/table›
‹/form›
FF中 input.parentNode 的值为form，而IE中 input.parentNode 的值为空节点

FF中节点自己没有 removeNode 方法
解决方法
必须使用如下方法 node.parentNode.removeChild(node)

26.nodeName和tagName问题

在FF中，所有节点均有nodeName值，但textNode没有tagName
解决方法
使用tagName，但应检测其是否为空

27.元素属性

IE下 input.type属性为只读，但是FF不可以修改

28.document.getElementsByName()和document.all[name]的问题

在IE中，getElementsByName()、document.all[name]均不能用来取得div元素
是否还有其他不能取的元素还不知道（这个问题还有争议，还在研究中）

29.调用子框架或者其他框架中的元素的问题

在IE中，可以用如下方法来取得子元素中的值

document.getElementByIdx_x("frameName").(document.)elementName
window.frames["frameName"].elementName

在 FF 中则需要改成如下形式来执行，与 IE 兼容：

window.frames["frameName"].contentWindow.document.elementName
window.frames["frameName"].document.elementName

30.对象宽高赋值问题

Firefox中类似obj.style.height = imgObj.height的语句无效
解决方法
统一使用obj.style.hetght = imgObj.height+‘px’;