火狐和IE的区别

css 和 javascript 在 IE 和 Firefox 中二十三个不同 点一、document.formName.item(itemName)问题问题说明：IE下，可以使用 document.formName.item(itemName) 或 document.formName.elements elementName； Firefox 下，只能使用 document.formName.elementselementName。解决方法：统一使用 document.formName.elementselementName。二、集合类对象问题问题说明：IE下，可以使用()或获取集合类对象；Firefox下，只能使用口获取集合 类对象。解决方法：统一使用 获取集合类对象。三、自定义属性问题问题说明：IE下，可以使用获取常规属性的方法来获取自定义属性，也可以使用 getAttribute() 获取自定义属性； Firefox 下，只能使用 getAttribute() 获取自定义属性。 解决方法：统一通过getAttribute()获取自定义属性。四、eval_r(idName)问题问题说明： IE 下，可以使用 eval_r(idName) 或 getElementById(idName) 来取得 id 为 idName 的 HTML 对象；Firefox 下，只能使用 getElementById(idName)来取得 id 为 idName 的 HTML 对象。解决方法：统一用getElementById(idName)来取得id为idName的HTML对象。五、变量名与某HTML对象ID相同的问题问题说明：IE下，HTML对象的ID可以作为document的下属对象变量名直接使用，Firefox下则不能；Firefox下，可以使用与HTML对象ID相同的变量名，IE下则不能。解决方法：使用 document.getElementById(idName)代替 document.idName。最好不要 取 HTML 对象 ID 相同的变量名，以减少错误；在声明变量时，一律加上 var 关键字，以避 免歧义。六、const问题问题说明：Firefox下，可以使用const关键字或var关键字来定义常量；IE下，只能使 用 var 关键字来定义常量。解决方法：统一使用var关键字来定义常量。七、input.type属性问题问题说明：IE下input.type属性为只读；但是Firefox下input.type属性为读写。解决办法：不修改input.type属性。如果必须要修改，可以先隐藏原来的input，然后在 同样的位置再插入一个新的 input 元素。八、window.event 问题问题说明：window.event只能在IE下运行，而不能在Firefox下运行，这是因为Firefox 的 event 只能在事件发生的现场使用。解决方法：在事件发生的函数上加上event参数，在函数体内(假设形参为evt)使用 var myEvent = evt?evt:(window.event?window.event:null)示例： function doSomething(evt) var myEvent = evt?evt:(window.event?window.event:null)九、 event.x 与 event.y 问题问题说明：IE下，even对象有x、y属性，但是没有pageX、pageY属性；Firefox下, even 对象有 pageX、pageY 属性，但是没有 x、y 属性。解决方法：var myX = event.x ? event.x : event.pageX; var myY = event.y ? event.y:event.pageY; 如果考虑第 8 条问题，就改用 myEvent 代替 event 即可。十、eventsrcElement 问题问题说明：IE下，even对象有srcElement属性，但是没有target属性；Firefox下，even 对象有target属性，但是没有srcElement属性。解决方法：使用 srcObj = event.srcElement ? event.srcElement : event.target;如果考虑第 8 条问题，就改用 myEvent 代替 event 即可。十一、window.location.href 问题问题说明：IE 或者 Firefox2.0.x 下，可以使用 window.location 或 window.location.href；Firefox1.5.x 下，只能使用 window.location。解决方法：使用window.location来代替window.location.href。当然也可以考虑使用 location.replace ()方法。十二、模态和非模态窗口问题问题说明： IE 下，可以通过 showModalDialog 和 showModelessDialog 打开模态和非模 态窗口； Firefox 下则不能。解决方法：直接使用window.open(pageURL,name,parameters)方式打开新窗口。如果需要将子窗口中的参数传递回父窗口，可以在子窗口中使用window.opener来访问 父窗口。如果需要父窗口控制子窗口的话，使用var subWindow = window.open(pageURL,name,parameters);来获得新开的窗口对象。十三、 frame 和 iframe 问题以下面的 frame 为例：(1)访问 frame 对象IE： 使用 window.frameId 或者 window.frameName 来访问这个 frame 对象；Firefox： 使用 window.frameName 来访问这个 frame 对象；解决方法：统一使用 window.document.getElementById(frameId)来访问这个 frame 对 象；(2)切换 frame 内容在 IE 和 Firefox 中都可以使用window.document.getElementById(frameId).src = .html或 window.frameName.location = .html来切换 frame 的内容；如果需要将frame中的参数传回父窗口，可以在frame中使用parent关键字来访问父窗 口。十四、body载入问题问题说明： Firefox 的 body 对象在 body 标签没有被浏览器完全读入之前就存在；而 IE 的 body 对象则必须在 body 标签被浏览器完全读入之后才存在。注这个问题尚未实际验证，待验证后再来修改。注经验证，IE6、Opera9以及FireFox2中不存在上述问题，单纯的JS脚本可以访问 在脚本之前已经载入的所有对象和元素，即使这个元素还没有载入完成。十五、事件委托方法问题说明：IE 下，使用 document.body.onload = inject;其中 function inject()在这之前已 被实现；在 Firefox 下，使用 document.body.onload = inject();解决方法：统一使用 document.body.onload=new Function(inject(); 或 者 document.body.onload = function()注意 Function 和 function 的区别十六、访问的父元素的区别问题说明：在IE下，使用obj.parentElement或obj.parentNode访问obj的父结点；在 firefox 下，使用 obj.parentNode 访问 obj 的父结点。解决方法：因为firefox与IE都支持DOM，因此统一使用obj.parentNode来访问obj的 父结点。十七、cursor:hand VS cursor:pointer问题说明：firefox不支持hand,但ie支持pointer，两者都是手形指示。 解决方法：统一使用 pointer。十八、 innerText 的问题.问题说明： innerText 在 IE 中能正常工作，但是 innerText 在 FireFox 中却不行 解决方法：在非 IE 浏览器中使用 textContent 代替 innerText。示例：if(navigator.appName.indexOf(Explorer) -1) document.getElementById(element).innerText = my text; elsedocument.getElementById(element).textContent = my text;注innerHTML同时被ie、firefox等浏览器支持，其他的，如outerHTML等只被ie支 持，最好不用。十九、对象宽高赋值问题问题说明：FireFox 中类似 obj.style.height = imgObj.height 的语句无效。 解决方法：统一使用 obj.style.height = imgObj.height + px;二十、Table操作问题问题说明：ie、firefox以及其它浏览器对于table标签的操作都各不相同，在ie中不允 许对 table 和 tr 的 innerHTML 赋值，使用 js 增加一个 tr 时，使用 appendChild 方法也不管用。解决方法：向table追加一个空行:var row = otable.insertRow(-1);var cell = document.createElement(td);cell.innerHTML = ;cell.className = XXXX; row.appendChild(cell);注由于俺很少使用JS直接操作表格，这个问题没有遇见过。建议使用JS框架集来操 作 table，如 JQuery。二一、ul和ol列表缩进问题消除 ul、ol 等列表的缩进时，样式应写成：list-style:none;margin:Opx;padding:Opx;其中margin属性对IE有效，padding属性对FireFox有效。此句表述有误，详细见J注 这个问题尚未实际验证，待验证后再来修改。注经验证，在IE中，设置margin:0px可以去除列表的上下左右缩进、空白以及列表 编号或圆点，设置padding对样式没有影响；在Firefox中，设置margin:Opx仅仅可以去除 上下的空白，设置padding:0px后仅仅可以去掉左右缩进，还必须设置list-style:none才能去 除列表编号或圆点。也就是说，在IE中仅仅设置margin:0px即可达到最终效果，而在Firefox 中必须同时设置margin:Opx、padding:0px以及list-style:none三项才能达到最终效果。二二、CSS 透明问题IE： filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。FF： opacity:0.6。注最好两个都写，并将opacity属性放在下面。二三、CSS圆角问题IE： ie7以下版本不支持圆角。FF： -moz-border-radius:4px,或者 -moz-border-radius-topleft:4px;-moz-border- radius-topright:4px;-moz-border-radius-bottomleft:4 px;-moz-border- radius- bottomright:4px;。注圆角问题是CSS中的经典问题，建议使用JQuery框架集来设置圆角，让这些复杂 的问题留给别人去想吧。关于CSS中的问题实在太多了，甚至同样的CSS定义在不同的页面标准中的显示效果 都是不一样的。更多的知识请参考52CSS.com的文章。一个合乎发展的建议是，页面采用 标准DHTML标准编写，较少使用table, CSS定义尽量依照标准D0M,同时兼顾IE、Firefox、 Opera等主流浏览器。BTW，很多情况下，FF和Opera的CSS解释标准更贴近CSS标准， 也更具有规范性