【免费】WEB浏览器兼容推荐收藏资源-CSDN文库

需积分: 0 201 浏览量 2020-12-10 18:21:59 上传评论收藏 91KB PDF 举报

并不一定全，有的也可能不准确，比如新出的IE8、 Chrome等都没有太多涉及，虽然最近做的一些项目也兼容了IE8、Chrome等，但都没来的及总结进去，后来就忘了…汗。大家一起慢慢完善吧。javascript部分1. document.form.item 问题问题：代码中存在 document.formName.item(“itemName”) 这样的语句，不能在FF下运行解决方法：改用 document.formName.elements[“elementName”]2. 集合类对象问题问题：代码中许多集合类对象取用时使用()，IE能接受，FF不能解决方法：改用 [] 作为下标运算，例：【WEB浏览器兼容性问题及其解决方案】在Web开发中，确保网页在不同的浏览器上表现一致是一项重要的任务。由于各个浏览器在实现标准和非标准特性时可能存在差异，因此开发者常常需要面对浏览器兼容性问题。以下是一些常见的JavaScript和HTML相关的问题及对应的解决策略，主要针对IE和Firefox（FF）之间的差异。 1. **`document.form.item`问题**： - 问题：`document.formName.item("itemName")`在FF中不支持。 - 解决方法：替换为`document.formName.elements["elementName"]`。 2. **集合类对象问题**： - 问题：FF不接受集合类对象使用()``作为访问方式。 - 解决方法：改为使用`[]`作为下标运算，如`document.getElementsByName("inputName")(1)`应改为`document.getElementsByName("inputName")[1]`。 3. **`window.event`问题**： - 问题：FF中`window.event`无法在事件外部使用。 - 解决方法：将`event`作为参数传递给函数，并在内部处理。例如： ```javascript onMouseMove = "functionName(event)"; function functionName(e) { e = e || window.event; ... } ``` 4. **ID作为对象名的问题**： - 问题：在IE中，HTML对象的ID可以直接作为`document`的子对象，FF不行。 - 解决方法：始终使用`getElementById("idName")`来获取对象。 5. **通过ID字符串取得对象**： - 问题：IE中可以用`eval("idName")`获取ID为`idName`的对象，FF不支持。 - 解决方法：用`getElementById("idName")`代替`eval("idName")`。 6. **变量名与HTML对象ID相同的问题**： - 问题：FF允许变量名与HTML对象ID相同，IE不行。 - 解决方法：声明变量时使用`var`关键字以避免歧义，或者避免使用与HTML对象ID相同的变量名。 7. **`event.x`和`event.y`问题**： - 问题：IE有`event.x`和`event.y`，FF没有。 - 解决方法：FF中用`event.pageX`代替`event.x`，但为兼容IE，使用`event.clientX`。 8. **frame问题**： - 问题：IE中可以通过`window.testFrame`访问frame，FF不行。 - 解决方法：在FF中，使用`window.top.document.getElementById("testFrame").src`或`window.top.frameName.location`。 9. **获取元素属性**： - 问题：FF需要使用`getAttribute()`获取自定义属性。 - 解决方法：在FF中使用`getAttribute()`，在其他浏览器中直接访问属性。 10. **`parentElement`和`children`问题**： - 问题：FF使用`parentNode`和`childNodes`，而IE使用`parentElement`和`children`。 - 解决方法：使用`parentNode`和`childNodes`，但注意FF的`childNodes`可能包含空白文本节点，可以使用`getElementsByTagName()`避免。 11. **`const`关键字问题**： - 问题：IE不支持`const`关键字。 - 解决方法：使用`var`替代`const`。 12. **`body`对象问题**： - 问题：FF的`body`对象在`<body>`标签未完全加载时不可用。 - 解决方法：使用`window.onload`或`DOMContentLoaded`事件确保在文档加载完成后操作`body`对象。以上只是Web浏览器兼容性问题的一部分，实际开发中可能还会遇到更多。解决这些问题的关键是遵循W3C标准，同时使用条件注释、polyfill库以及工具如Babel和autoprefixer来自动处理浏览器差异。记住，持续学习和测试是保持网站跨浏览器兼容性的关键。

资源详情

资源评论

资源推荐

WEB 浏览器兼容浏览器兼容推荐收藏推荐收藏

并不一定全，有的也可能不准确，比如新出的IE8、 Chrome等都没有太多涉及，虽然最近做的一些项目也兼容了IE8、

Chrome等，但都没来的及总结进去，后来就忘了…汗。大家一起慢慢完善吧。

javascript部分部分

1. document.form.item 问题问题

问题：

代码中存在 document.formName.item(“itemName”) 这样的语句，不能在FF下运行

解决方法：

改用 document.formName.elements[“elementName”]2. 集合类对象问题集合类对象问题

问题：

代码中许多集合类对象取用时使用()，IE能接受，FF不能

解决方法：

改用 [] 作为下标运算，例：

document.getElementsByName(“inputName”)(1) 改为 document.getElementsByName(“inputName”)[1]3. window.event

问题：

使用 window.event 无法在FF上运行

解决方法：

FF的 event 只能在事件发生的现场使用，此问题暂无法解决。可以把 event 传到函数里变通解决：

onMouseMove = “functionName(event)”

function functionName (e) {

e = e || window.event;

……

}

4. HTML对象的对象的 id 作为对象名的问题作为对象名的问题

问题：

在IE中，HTML对象的 ID 可以作为 document 的下属对象变量名直接使用，在FF中不能

解决方法：

使用对象变量时全部用标准的 getElementById(“idName”)

5. 用用 idName 字符串取得对象的问题字符串取得对象的问题

问题：

在IE中，利用 eval(“idName”) 可以取得 id 为 idName 的HTML对象，在FF中不能

解决方法：

用 getElementById(“idName”) 代替 eval(“idName”)

6. 变量名与某变量名与某HTML对象对象 id 相同的问题相同的问题

问题：

在FF中，因为对象 id 不作为HTML对象的名称，所以可以使用与HTML对象 id 相同的变量名，IE中不能

解决方法：

在声明变量时，一律加上 var ，以避免歧义，这样在IE中亦可正常运行

最好不要取与HTML对象 id 相同的变量名，以减少错误

7. event.x 与与 event.y 问题问题

问题：

在IE中，event 对象有x,y属性，FF中没有

解决方法：

在FF中，与 event.x 等效的是 event.pageX ，但event.pageX IE中没有

故采用 event.clientX 代替 event.x ，在IE中也有这个变量

event.clientX 与 event.pageX 有微妙的差别，就是滚动条

要完全一样，可以这样：

mX = event.x ? event.x : event.pageX;

然后用 mX 代替 event.x

8. 关于关于frame

问题：

在IE中可以用 window.testFrame 取得该frame，FF中不行

解决方法：

window.top.document.getElementById(“testFrame”).src = ‘xx.htm’

window.top.frameName.location = ‘xx.htm’

9. 取得元素的属性取得元素的属性

在FF中，自己定义的属性必须 getAttribute() 取得

10. 在在FF中没有中没有 parentElement，，parement.children 而用而用 parentNode，，parentNode.childNodes

问题：

childNodes 的下标的含义在IE和FF中不同，FF的 childNodes 中会插入空白文本节点

解决方法：

可以通过 node.getElementsByTagName() 来回避这个问题

问题：

当html中节点缺失时，IE和FF对 parentNode 的解释不同，例如：

<form>

<table>

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余3页未读，立即下载

评论收藏

内容反馈

weixin_38623707

粉丝: 5
资源: 923

WEB 浏览器兼容推荐收藏

评论0

最新资源

WEB 浏览器兼容 推荐收藏

评论0

web 浏览器兼容工具

web浏览器兼容

适用于web浏览器兼容性测试

web前端浏览器兼容性问题和新知识.docx

浏览器兼容测试工具

WEB浏览器兼容性开发宝典

WEB浏览器支持库

Web浏览器兼容性测试工具如何选择?

浏览器兼容

常见浏览器兼容问题

Web浏览器兼容性测试工具如何选择？

易语言 WEB浏览器 2.0 支持库

易语言 支持库 web浏览器2.0 下载

浏览器兼容性设置级解释

浏览器兼容问题.ppt

浏览器兼容报告

基于捕获_重放的Web应用跨浏览器兼容性检测.pdf

常见浏览器兼容性问题汇总及解决方案

常见浏览器兼容性问题与解决方案

简单web浏览器模板

多浏览器兼容的JS日历控件

pb11.5中调用 Microsoft WEB 浏览器 控件

rtmp视频流web浏览器播放

javascript解决浏览器兼容性问题

大华摄像头web浏览器调用插件显示demo

跨浏览器兼容的CSS代码编程方法

Web打印控件兼容所有浏览器版本

最新资源

WEB 浏览器兼容推荐收藏

易语言支持库 web浏览器2.0 下载

pb11.5中调用 Microsoft WEB 浏览器控件