JavaScript浏览器兼容性开发技巧与陷阱

"浏览器兼容页面开发注意事项(javascript篇)_101028实用.pdf" 在进行网页开发时，浏览器兼容性是一个不容忽视的问题，尤其是JavaScript的使用，因为不同的浏览器可能有不同的实现方式，导致相同的代码在不同浏览器下表现不一致。以下是一些关键的JavaScript兼容性问题和解决策略： 1. document.form.item问题：在某些浏览器中，可以通过`document.formName.item("itemName")`来获取表单元素，但在其他浏览器中可能需要使用`document.forms["formName"]["itemName"]`。 2. 集合类对象问题：不同的浏览器可能对集合类对象如`forms`, `links`, `images`等的处理方式有差异，需要统一访问方式，例如使用`document.getElementsByTagName()`。 3. window.event：IE浏览器内置了`window.event`对象来存储当前事件的信息，但在非IE浏览器中，事件信息通常通过事件处理函数的参数传递。 4. HTML对象的id作为对象名的问题：如果HTML对象的id与JavaScript变量名相同，可能会导致混淆，建议避免这种命名冲突。 5. 用idName字符串取得对象的问题：IE支持`eval("idName")`来获取对象，但这种方式存在安全隐患，最好使用`document.getElementById("idName")`。 6. 变量名与HTML对象ID相同的问题：为了避免命名冲突，可以使用`document.getElementById()`来确保总是引用到DOM元素，而不是JavaScript变量。 7. event.x与event.y问题：IE和非IE浏览器对鼠标事件坐标有不同的处理，需要使用`event.clientX`和`event.clientY`来获取相对浏览器窗口的坐标。 8. 关于frame：跨框架操作时，需考虑`window.parent`、`window.top`和`window.frames`的区别。 9. 在FF中，自己定义的属性必须通过getAttribute()取得：Firefox中，自定义属性不直接可用，需要通过`getAttribute()`获取。 10. 在FF中没有parentElement和parentElement.children：Firefox使用`parentNode`和`childNodes`来替代。 11. const问题：IE不支持`const`关键字，可以改用`var`并确保变量只读。 12. body对象：处理body对象时要注意IE和Firefox对加载时机的理解不同，可能需要在`window.onload`事件中操作。 13. urlencoding：URL编码解码在不同浏览器中可能需要使用`encodeURIComponent()`和`decodeURIComponent()`。 14. nodeName和tagName问题：两者在区分大小写上可能有区别，通常使用`element.tagName`获取元素标签名。 15. 元素属性：访问和设置元素属性时，IE支持`element.getAttribute()`和`element.setAttribute()`，而Firefox通常直接使用`element.propertyName`。 16. document.getElementsByName()和document.all[name]的问题：前者是W3C标准，后者是IE特有，应优先使用前者。 17. document.formName.item("itemName")问题：部分浏览器不支持这种方法，建议使用`document.forms["formName"]["itemName"]`。 18. 集合类对象问题：遍历集合类对象时，注意其索引是从0开始还是从1开始。 19. 自定义属性问题：为元素添加自定义属性时，推荐使用`data-*`属性，以符合HTML5规范。 20. eval("idName")问题：尽量避免使用`eval()`，因其可能导致安全风险，可使用`document.getElementById()`代替。 21. input.type属性问题：更改输入类型时，需要确认所有浏览器都能正确处理。 22. event.srcElement问题：在非IE浏览器中，`event.target`表示事件源，而在IE中是`event.srcElement`。 23. frame问题：处理跨框架交互时，需注意不同浏览器的API差异。 24. body问题：操作body对象时，确保在文档完全加载后再进行。 25. 事件委托方法：使用事件冒泡或捕获来实现事件委托，需考虑不同浏览器的兼容性。 26. Firefox与IE(parentElement)的父元素的区别：Firefox使用`parentNode`，而IE使用`parentElement`，应使用`element.parentElement || element.parentNode`。 27. innerText在IE中能正常工作，但是在FireFox中却不行：使用`textContent`来代替，它在大多数浏览器中都有效。 28. FireFox中类似obj.style.height=imgObj.height的语句无效：需要使用`obj.style.setProperty('height', imgObj.height + 'px')`。 29. ie,firefox以及其它浏览器对于table标签的操作都各不相同：在操作表格元素时，需针对每个浏览器编写兼容代码。 30. padding问题：不同浏览器可能对CSS的`padding`计算有差异，需测试并调整。 31. 消除ul、ol等列表的缩进时：使用负值的`list-style-image`或CSS的`margin`、`padding`来消除缩进。 32. CSS透明：使用`opacity`属性时，需要为IE提供`filter`属性实现兼容。 33. CSS圆角：使用CSS3的`border-radius`，但需为旧版浏览器提供备选方案，如图片背景。 34. CSS双线凹凸边框：利用伪元素和边框来创建，注意兼容性。 35. ie支持document.all而firefox不支持：不要依赖`document.all`，使用`getElementById`或其他W3C标准方法。 36. Firefox中使用innerHTML：Firefox对某些元素（如`table`, `tr`）的`innerHTML`操作可能不支持，应使用DOM操作方法。 处理这些问题的关键在于了解各种浏览器的特性，并编写能够适应多种环境的代码，通常使用条件注释、Modernizr等工具，或者库如jQuery、Prototype等，来简化兼容性工作。同时，遵循W3C标准和最佳实践，可以帮助减少兼容性问题。