js在火狐和IE浏览器的差异

js在火狐和IE浏览器的差异（摘录）以下以IE代替InternetExplorer，以MF代替MozzilaFirefox1.document.form.item问题(1)现有问题：现有代码中存在许多document.formName.item(itemName)这样的语句，不能在MF下运行(2)解决方法：改用document.formName.elements[elementName](3)其它参见22.集合类对象问题(1)现有问题：现有代码中许多集合类对象取用时使用()，IE能接受，MF不能。(2)解决方法：改用[]作为下标运算。如：document.forms(formName)改为document.forms[formName]。又如：document.getElementsByName(inputName)(1)改为document.getElementsByName(inputName)[1](3)其它3.window.event(1)现有问题：使用window.event无法在MF上运行(2)解决方法：MF的event只能在事件发生的现场使用，此问题暂无法解决。可以这样变通：原代码(可在IE中运行)：inputtype=buttonname=someButtonvalue=提交onclick=javascript:gotoSubmit()/...scriptlanguage=javascriptfunctiongotoSubmit(){...alert(window.event);//usewindow.event...}/script新代码(可在IE和MF中运行)：inputtype=buttonname=someButtonvalue=提交onclick=javascript:gotoSubmit(event)/...scriptlanguage=javascriptfunctiongotoSubmit(evt){evt=evt?evt:(window.event?window.event:null);...alert(evt);//useevt...}/script此外，如果新代码中第一行不改，与老代码一样的话(即gotoSubmit调用没有给参数)，则仍然只能在IE中运行，但不会出错。所以，这种方案tpl部分仍与老代码兼容。4.HTML对象的id作为对象名的问题(1)现有问题在IE中，HTML对象的ID可以作为document的下属对象变量名直接使用。在MF中不能。(2)解决方法用getElementById(idName)代替idName作为对象变量使用。5.用idName字符串取得对象的问题(1)现有问题在IE中，利用eval(idName)可以取得id为idName的HTML对象，在MF中不能。(2)解决方法用getElementById(idName)代替eval(idName)。6.变量名与某HTML对象id相同的问题(1)现有问题在MF中，因为对象id不作为HTML对象的名称，所以可以使用与HTML对象id相同的变量名，IE中不能。(2)解决方法在声明变量时，一律加上var，以避免歧义，这样在IE中亦可正常运行。此外，最好不要取与HTML对象id相同的变量名，以减少错误。(3)其它参见问题47.event.x与event.y问题(1)现有问题在IE中，event对象有x,y属性，MF中没有。(2)解决方法在MF中，与event.x等效的是event.pageX。但event.pageXIE中没有。故采用event.clientX代替event.x。在IE中也有这个变量。event.clientX与event.pageX有微妙的差别（当整个页面有滚动条的时候），不过大多数时候是等效的。如果要完全一样，可以稍麻烦些：mX=event.x?event.x:event.pageX;然后用mX代替event.x(3)其它event.layerX在IE与MF中都有，具体意义有无差别尚未试验。8.关于frame(1)现有问题在IE中可以用window.testFrame取得该frame，mf中不行(2)解决方法在frame的使用方面mf和ie的最主要的区别是：如果在frame标签中书写了以下属性：framesrc=xx.htmid=frameIdname=frameName/那么ie可以通过id或者name访问这个frame对应的window对象而mf只可以通过name来访问这个frame对应的window对象例如如果上述frame标签写在最上层的window里面的htm里面，那么可以这样访问ie：window.top.frameId或者window.top.frameName来访问这个window对象mf：只能这样window.top.frameName来访问这个window对象另外，在mf和ie中都可以使用window.top.document.getElementById(frameId)来访问frame标签并且可以通过window.top.document.getElementById(testFrame).src='xx.htm'来切换frame的内容也都可以通过window.top.frameName.location='xx.htm'来切换frame的内容9.在mf中，自己定义的属性必须getAttribute()取得10.在mf中没有parentElementparement.children而用parentNodeparentNode.childNodeschildNodes的下标的含义在IE和MF中不同，MF使用DOM规范，childNodes中会插入空白文本节点。一般可以通过node.getElementsByTagName()来回避这个问题。当html中节点缺失时，IE和MF对parentNode的解释不同，例如formtableinput//table/formMF中input.parentNode的值为form,而IE中input.parentNode的值为空节点MF中节点没有removeNode方法，必须使用如下方法node.parentNode.removeChild(node)11.const问题(1)现有问题:在IE中不能使用const关键字。如constconstVar=32;在IE中这是语法错误。(2)解决方法:不使用const，以var代替。12.body对象MF的body在body标签没有被浏览器完全读入之前就存在，而IE则必须在body完全被读入之后才存在13.urlencoding在js中如果书写url就直接写&不要写&例如varurl='xx.jsp?objectName=xx&objectEvent=xxx';frm.action=url那么很有可能url不会被正常显示以至于参数没有正确的传到服务器一般会服务器报错参数没有找到当然如果是在tpl中例外，因为tpl中符合xml规范，要求&书写为&一般MF无法识别js中的&14.nodeName和tagName问题(1)现有问题：在MF中，所有节点均有nodeName值，但textNode没有tagName值。在IE中，nodeName的使用好象有问题（具体情况没有测试，但我的IE已经死了好几次）。(2)解决方法：使用tagName，但应检测其是否为空。15.元素属性IE下input.type属性为只读，但是MF下可以修改16.document.getElementsByName()和document.all[name]的问题(1)现有问题：在IE中，getElementsByName()、document.all[name]均不能用来取得div元素（是否还有其它不能取的元素还不知道）。W3C说是一个标准,不如说是一个麻烦,FireFox大家都说好用,但我宁愿它没有!!苦了这些程序员,哎以下细节只针对IE和FireFox，其它浏览器并未测试1.DOCTYPE影响CSS处理2.FF:div设置margin-left,margin-right为auto时已经居中,IE不行3.FF:body设置text-align时,div需要设置margin:auto(主要是margin-left,margin-right)方可居中4.FF:设置padding后,div会增加height和width,但IE不会,故需要用!important多设一个height和width5.FF:支持!important,IE则忽略,可用!important为FF特别设置样式6.div的垂直居中问题:vertical-align:middle;将行距增加到和整个DIV一样高line-height:200px;然后插入文字，就垂直居中了。缺点是要控制内容不要换行7.cursor:pointer可以同时在IEFF中显示游标手指状，hand仅IE可以8.FF:链接加边框和背景色，需设置display:block,同时设置float:left保证不换行。参照menubar,给a和menubar设置高度是为了避免底边显示错位,若不设height,可以在menubar中插入一个空格。9.在mozillafirefox和IE中的BOX模型解释不一致导致相差2px解决方法：div{margin:30px!important;margin:28px;}注意这两个margin的顺序一定不能写反，据阿捷的说法!important这个属性IE不能识别，但别的浏览器可以识别。所以在IE下其实解释成这样：div{maring:30px;margin:28px}重复定义的话按照最后一个来执行，所以不可以只写margin:XXpx!important;10.IE5和IE6的BOX解释不一致IE5下div{width:300px;margin:010px010px;}div的宽度会被解释为300px-10px(右填充)-10px(左填充)最终div的宽度为280px，而在IE6和其他浏览器上宽度则是以300px+10px(右填充)+10px(左填充)=320px来计算的。这时我们可以做如下修改div{width:300px!important;width/**/:340px;margin:010px010px}关于这个/**/是什么我也不太明白，只知道IE5和firefox都支持但IE6不支持，如果有人理解的话，请告诉我一声，谢了！：）11.ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值所以先定义ul{margin:0;padding:0;}就能解决大部分问题12.对div设置水平居中对齐时，要给子div加上一句margin:auto以兼容FireFox浏览器13.当div的布局并没有如text-align设置的那样排列时，尝试用float来实现14.将p标签的样式改成:margin:0px;line-height:XXpx，避免在FireFox浏览器下发生一些意想不到的结果15.想要消除ul、ol等列表的缩进时，样式应写成:list-style:none;margin:0px;padding:0px;，其中margin属性对IE有效，padding属性对FireFox有效16.padding5px4px3px1pxFireFox无法解释简写,必须改成padding-top:5px;padding-right:4px;padding-bottom:3px;padding-left:1px;注意事项：1、float的div一定要闭合。例如：(其中floatA、floatB的属性已经设置为float:left;)#divid=floatA/#div#divid=floatB/#div#divid=NOTfloatC/#div这里的NOTfloatC并不希