JavaScript浏览器兼容性开发技巧与问题汇总

"浏览器兼容页面开发注意事项(javascript篇)_101028.pdf" 在进行浏览器兼容性页面开发时，JavaScript部分是至关重要的，因为不同的浏览器可能会有不同的实现方式，导致某些功能在某些浏览器中无法正常工作。以下是一些关键点的详细说明： 1. document.form.item问题：在旧版本的IE浏览器中，可以通过`document.form.item(name)`来访问表单元素，而在其他浏览器中，通常使用`document.forms[formName].elements[name]`。 2. 集合类对象问题：不同的浏览器对集合类对象如`forms`、`links`、`images`等的处理方式可能不同，例如访问方式和索引方式可能存在差异。 3. window.event：IE浏览器内建了`window.event`对象，用于存储当前事件的相关信息，但在非IE浏览器中，事件对象通常是事件处理函数的参数。 4. HTML对象的id作为对象名的问题：在JavaScript中，HTML对象的id可以被用作全局变量名，但这种做法在某些情况下可能导致冲突，尤其是在大型复杂项目中。 5. 用idName字符串取得对象的问题：IE支持`document.all[idName]`来获取对象，而其他标准浏览器则推荐使用`document.getElementById(idName)`。 6. 变量名与某HTML对象id相同的问题：为了避免命名冲突，应避免将变量名与HTML对象的id相同。 7. event.x与event.y问题：在IE中，`event.x`和`event.y`表示相对于浏览器窗口的坐标，而在其他浏览器中，它们可能表示相对于事件源元素的坐标。 8. 关于frame：处理frames和iframes时，不同的浏览器可能有不同的API和行为，比如在访问frame内容时的路径和方法。 9. 在FF中，自己定义的属性必须通过getAttribute()取得：Firefox要求使用`getAttribute()`来获取自定义属性，而IE等其他浏览器可能直接通过点号或方括号访问。 10. 在FF中没有parentElement parement.children：Firefox使用`parentNode`和`childNodes`，而IE有`parentElement`和`children`。 11. const问题：`const`在Firefox等遵循ECMAScript标准的浏览器中用于声明常量，但在IE中不受支持，可使用`var`并保持变量不变来模拟常量。 12. body对象：IE和Firefox中获取和操作`body`对象的方法略有不同，例如在事件绑定上。 13. urlencoding：编码URL时，需要注意不同浏览器对特定字符的编码方式可能存在差异。 14. nodeName和tagName问题：`nodeName`返回元素的名称，大写在标准浏览器中，小写在IE中；`tagName`在所有浏览器中通常返回大写。 15. 元素属性：访问和设置元素属性时，IE支持`element.getAttribute('attr')`和`element.setAttribute('attr', 'value')`，其他浏览器通常也支持这些，但有时更倾向于使用`element.attr`。 16. document.getElementsByName()和document.all[name]的问题：`document.getElementsByName()`在标准浏览器中用于查找具有相同name属性的元素，而`document.all[name]`在IE中查找。 17. document.formName.item("itemName")问题：在某些旧版浏览器中，可以使用`document.formName.item(itemName)`访问表单元素，但现代浏览器通常推荐使用`document.forms[formName].elements[itemName]`。 18. 集合类对象问题：再次强调，集合类对象在不同浏览器中的处理方式可能不一致，需特别注意。 19. 自定义属性问题：添加自定义属性时，需确保在所有浏览器中都能正确访问和设置。 20. eval("idName")问题：`eval()`函数在处理字符串时，可能会引发安全和性能问题，尤其是在涉及DOM操作时。 21. 变量名与某HTML对象ID相同的问题：重名可能导致意外行为，避免这种情况。 22. input.type属性问题：设置`input`元素的`type`属性时，需要考虑不同浏览器对某些类型的接受程度，如`type="date"`。 23. event.x与event.y问题：如前所述，这两个属性在不同浏览器中代表的意义不同。 24. event.srcElement问题：在IE中，事件源元素是`event.srcElement`，而在其他浏览器中是`event.target`。 25. frame问题：跨frame交互需要了解不同浏览器的限制和API差异。 26. body问题：操作`body`元素时，可能需要处理不同浏览器的差异，如事件监听和样式应用。 27. 事件委托方法：事件委托策略在所有浏览器中都可以实现，但具体实现语法可能有所不同。 28. firefox与IE(parentElement)：Firefox使用`parentNode`获取父元素，而IE有`parentElement`，这可能导致兼容性问题。 29. innerText在IE中能正常工作，但是innerText在FireFox中却不行：Firefox使用`textContent`，而IE使用`innerText`来获取和设置元素的文本内容。 30. FireFox中类似obj.style.height=imgObj.height的语句无效：Firefox可能要求使用`obj.style.setProperty('height', imgObj.height + 'px')`。 31. ie,firefox以及其它浏览器对于table标签的操作都各不相同：在处理`table`、`tr`元素时，比如添加、删除、修改，需要注意不同浏览器的API和行为。 32. padding问题：不同浏览器对CSS padding的解析可能有微小差异，需要测试确保一致的显示效果。 33. 消除ul、ol等列表的缩进时：使用CSS清除默认的列表样式时，可能需要针对不同浏览器编写额外的样式。 34. CSS透明：IE6使用`filter: alpha(opacity=xx)`，其他浏览器通常使用`opacity: xx`。 35. CSS圆角：CSS3的`border-radius`属性在IE9以下不支持，需要使用像`-webkit-border-radius`这样的厂商前缀来实现跨浏览器的圆角效果。 36. CSS双线凹凸边框：创建双线边框需要利用伪元素和边框颜色，不同浏览器可能需要不同的实现。 37. ie支持document.all而firefox不支持：在编写兼容代码时，需要避免依赖`document.all`，而使用`getElementsByTagName`或`querySelectorAll`等更通用的方法。 38. firefox中使用innerHTML：在Firefox中，某些操作（如`table`、`tr`的`innerHTML`）可能不如IE直接，可能需要使用其他方法来实现相同的功能。 进行浏览器兼容性开发时，开发者需要熟悉各种浏览器的特性和差异，编写能够适应各种环境的JavaScript代码，确保页面在不同浏览器上的表现一致。使用条件注释、特性检测和库（如jQuery）可以帮助简化这个过程。