1、js 在 IE 和 Firefox 不同之处做 Web 类项目，不可避免的要涉及浏览器的兼容性问题，特别是 javascript 的兼容性问题，典型代表就是 IE 浏览器和 FireFox 浏览器，了解到不同之处就可以避免出现使用不同浏览器时可能会出现的兼容性问题，找了一些关于 js 在 IE 和 FireFox 中区别的资料，以供参考。:88884 m- P1 P; “ w4 Z* m1. document.form.item 问题问题：信息平台( w$ ; ! H% d- m! K* K现有代码中存在许多 document.formName.item(“itemName“) 这样的语句，不
2、能在Firefox 下运行7 0 R6 s$ 3 x7 J* b+ J0 _解决方法：统一使用 document.formName.elements“elementName“1 ) % d$ k8 M2. 集合类对象问题问题：* o! W- c+ 3 H I3 |# y* a0 N7 . OIE 下,可以使用()或获取集合类对象；Firefox 下，只能使用获取集合类对象 ; o! ? v$ W) n; j解决方法：改用 作为下标运算。如：document.forms(“formName“) 改为 document.forms“formName“又如：document.getElementsB
3、yName(“inputName“)(1) 改为 document.getElementsByName(“inputName“)1, I“ s- 4 e4 |5 o* Q; G yfunction getEvent(evt) evt=evt?evt:(window.event?window.event:null); event 属性问题：IE 下，event 对象有 x，y 属性，但是没有 pageX，pageY 属性；Firefox 下，event 对象有pageX，pageY 属性，但是没有 x，y 属性。* Y3 c5 p5 x) C5 q- 6 Z, J6 EFirefox 中的 ev
4、ent.pageX 相当于 IE 中的 event.x解决方法：event.x = event.x ? event.x : event.pageX;3 P7 y0 p4. HTML 对象的 id 作为对象名的问题 % k0 h, u5 c; m* t9 U问题：在 IE 中，HTML 对象的 ID 可以作为 document 的下属对象变量名直接使用，而在 Firefox中不能。解决方法：统一用 getElementById(“idName“) 代替 idName 作为对象变量使用。5. 用 idName 字符串取得对象的问题 :8888) U% L C2 m: W0 C- p3 _) p问题
5、：在 IE 中，利用 eval(idName)可以取得 id 为 idName 的 HTML 对象，而在 Firefox 中不能。8 q% a% x, E5 / i5 C4 V2 x) _% |; 8 b. v% d0 Z% w8. frame 问题问题：! b1 |$ o c# n( z n在 IE 中 可以用 window.testFrame 取得该 frame，而 Firefox 中不行信息平台# p3 E) O% q s; w1 ; ?2 :8888/ c 1 Q( q. KIE 可以通过 id 或者 name 访问这个 frame 对应的 window 对象而 Firefox 只可以
6、通过 name 来访问这个 frame 对应的 window 对象/ C5 q/ w w. I. H+ K: s如果上述 frame 标签写在最上层的 window 里面的 htm 里面，那么可以这样访问IE：window.top.frameId 或者 window.top.frameName 来访问这个 window 对象Firefox：只能这样 window.top.frameName 来访问这个 window 对象另外，在火狐和 IE 中都可以使用 window.top.document.getElementById(“frameId“)来访问 frame 标签并且可以通过 window
7、.top.document.getElementById(“testFrame“).src = xx.htm来切换 frame 的内容信息平台$ c F, m );else /Firefox 下为 dlg 对象添加事件 :88886 N6 Y! t* * ? f* h% ; z/ Odlg.setAttribute(“onmousedown“, “move_Div(this);“);0 u0 U4 x! _* u10.在 Firefox 中没有 parentElement children 而用 parentNode childNodes4 b$ “ _3 y; V6 childNodes 的
8、下标的含义在 IE 和 Firefox 中不同，Firefox 使用 DOM 规范，childNodes中会插入空白文本节点 - firefox 下 childNodes 会把换行和空白字符都算作父节点的子节点,而 ie 的 childNodes 和 children 不会。, w+ _$ |“ j* Y7 k V一般可以通过 node.getElementsByTagName()来回避这个问题。8 z+ U6 o( R2 ?4 N o5 Q0 i6 T+ l# i4 N. % _0 v; * T5 G# + c j) hFirefox 中 input.parentNode 的值为 form,
9、 而 IE 中 input.parentNode 的值为空节点5 t5 3 f* p$ G+ Firefox 中节点没有 removeNode 方法，必须使用如下方法 node.parentNode.removeChild(node):88882 r2 F9 C+ t% $ y“ h2 L11.const 问题问题:# n r6 S% O“ O M7 M; ?1 S# n在 IE 中不能使用 const 关键字。如 const constVar = 32; 在 IE 中这是语法错误。信息平台0 % Z8 X1 T# K2 f方法:不使用 const ，以 var 代替。:88887 W4 y$
10、 P0 O8 T4 m) ; U2 Y# J; O12. body 对象Firefox 的 body 在 body 标签没有被浏览器完全读入之前就存在，而 IE 则必须在 body 完全被读入之后才存在3 h+ l0 8 L4 F w9 u13. url encoding 信息平台3 v2 3 C e5 C: z$ L8 c6 i那么 frm.action = url 时， url 很有可能不会被正常显示以至于参数没有正确的传到服务器，一般会服务器报错参数没有找到。- n. 0 o/ F* |“ p9 r; / v当然在 tpl 中例外，因为 tpl 中符合 xml 规范，要求 |/ ? 一般
11、 Firefox 无法识别 JS 中的)来代替 IE 下的 event.srcElement 或者 Firefox 下的 event.target18.模态和非模态窗口问题问题:IE 下，可以通过 showModalDialog 和 showModelessDialog 打开模态和非模态窗口；Firefox 下则不能。信息平台0 _; 3 J# T, O/ 解决方法:直接使用 window.open(pageURL,name,parameters)方式打开新窗口。如果需要将子窗口中的参数传递回父窗口，可以在子窗口中使用 window.opener 来访问父窗口。 例如：var parentWi
12、n = window.opener;+ o. h% b5 J9 |$ XparentWin.document.getElementById(“Aqing“).value = “Aqing“;/ j“ d/ g# ?“ n7 a$ ) u3 i k19. 事件委托方法 J) C V1 L) ! h8 _IE：document.body.onload = inject; /Function inject()在这之前已被实现信息平台+ z* i+ H4 M% Y, ) j7 T DFirefox：document.body.onload = inject();有人说标准是：document.body
13、.onload=new Function(inject(); ?1 x4 U$ - c+ o0 H0 t) b p, w解决方法: 统一使用 pointer0 e- u6 R% i6 m22.innerText 在 IE 中能正常工作，但是 innerText 在 FireFox 中却不行.* ?$ E+ Q% A# ?解决方法:7 t* 8 G$ y6 M( i1 wif(navigator.appName.indexOf(“Explorer“) -1) ( J elsedocument.getElementById(element).textContent = “my text“;! V1
14、 ?2 b3 2 9 r+ $ H* d1 y“ ; :8888: * I W% 8 s1 Z2 V) c24. IE,Firefox 以及其它浏览器对于 table 标签的操作都各不相同，在 ie 中不允许对table 和 tr 的 innerHTML 赋值，使用 js 增加一个 tr 时，使用 appendChile 方法也不管用。解决方法： /向 table 追加一个空行var row = otable.insertRow(-1);var cell = document.createElement(“td“);cell.innerHTML = “ “;cell.className = “
15、XXXX“;信息平台+ 1 V) O8 N8 i# i) hrow.appendChild(cell);25. padding 问题 :8888 x% e3 e! MFireFox 无法解释 padding 5px 4px 3px 1px 简写，必须改成 padding-top:5px; padding-right:4px; padding-bottom:3px; padding-left:1px;信息平台- x. j4 P# A# V6 N7 b7 o4 D+ f26. 消除 ul、ol 等列表的缩进时样式应写成：list-style:none;margin:0px;padding:0px;
16、8 N: y4 p P- y e# , s) vIE：不支持圆角。FireFox： -moz-border-radius:4px，或者-moz-border-radius-topleft:4px;-moz-border- radius-topright:4px;-moz-border-radius-bottomleft:4px;-moz-border-radius- bottomright:4px;, V4 N* u2 - W6 F4 r29. CSS 双线凹凸边框$ U f8 $ _/ U e4 O) U5 Z NIE：border:2px outset;FireFox：-moz-borde
17、r-top-colors: #d4d0c8 white;-moz-border-left-colors: #d4d0c8 white;-moz-border-right-colors:#404040 #808080;-moz-border-bottom-colors:#404040 #808080;( B0 # A1 t$ i# 30.window.location.href 问题问题：IE 或者 Firefox2.0.x 下，可以使用 window.location 或window.location.href;Firefox1.5.x 下，只能使用 :88881 n1 H0 u( R5 d/ “ i9 X1 p* W$ A( P. J4 / M解决方法：使用 window.location 来代替 window.location.href+ N E解决办法：使用 window.top.close()
