IE && W3C

JavaScript在IE浏览器和Firefox浏览器中的差异总结

JavaScript在IE浏览器和Firefox浏览器中存在一些差异,以下对这些差异部分进行了总结,以及解决方案:

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

IE:HTML 对象的 ID 可以作为 document 的下属对象变量名直接使用

Firefox:不支持

解决方法:使用document.getElementById替代document.all

2.如果控件只有name,没有id, 用getElementById时:

IE:可以找到对象

Firefox:返回NULL

解决方法:所有控件必须设置ID属性

3.Evel:

IE:支持,利用 eval(idName) 可以取得 id 为 idName 的 HTML 对象

Firefox:不支持

解决方法:统一使用getElementById(idName) 代替 eval(idName)。

4.Event:

IE:用全局对象window.event

Firefox:event只能在事件发生的现场使用,在调用函数时传入event对象

解决方法:使用之前做一下浏览器类型判断,各用各的。

5.对象名称中美元符号‘$’ 改为使用下划线‘_’

6.集合类对象问题

IE:可以使用()或[]获取集合类对象

Firefox:只能使用[]获取集合类对象

现有代码中存在许多,不能在 Firefox 下运行

解决方法:统一使用[]获取集合类对象。document.form.item("itemName") 这样的语句改为document.form.elements["elementName"]

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

IE:不能使用与 HTML 对象 id 相同的变量名

Firefox:可以使用

解决方法:在声明变量时,一律加上 var ,以避免歧义,这样在 IE 中亦可正常运行。此外,最好不要取与 HTML 对象 id 相同的变量名,以减少错误。

8.Event定位问题

IE:支持event.x 和event.y

Firefox:支持event.pageX和event.pageY

解决方法,统一使用event.clientX和event.clientY,但是在Firefox中event.clientX 与 event.pageX 有微妙的差别(当整个页面有滚动条的时候),不过大多数时候是等效的。如果要完全一样,可以判断浏览器类型后对应使用。

9.父结点的问题

IE:parentElement parentElement.children

Firefox:parentNode parentNode.childNodes

childNodes的下标的含义在IE和Firefox中不同,Firefox使用DOM规范,childNodes会插入空白文本节点。一般可以通过node.getElementsByTagName()来回避这个问题。

当html中节点缺失时,IE和Firefox对parentNode的解释不同。例如:

<form>

<table>

<input/>

</table>

</form>

IE:input.parentNode的值为空节点

Firefox:input.parentNode的值为form

解决方法:Firefox中节点没有removeNode方法,必须使用如下方法 node.parentNode.removeChild(node)

10.const 问题

IE:不支持 const 关键字。

如 const constVar = 32; 在IE中这是语法错误

Firefox:支持

解决方法:不使用 const ,以 var 代替。

11.body 对象

IE:在body标签完全被读入之后才存在

Firefox:在body标签没有被浏览器完全读入之前就存在

12.自定义属性问题

IE:可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性

Firefox:只能使用getAttribute()获取自定义属性.

解决方法:统一通过getAttribute()获取自定义属性

13.event.srcElement问题

IE:even.srcElement

Firefox:even.target

解决方法:使用时判断浏览器类型,各用各的。

14.模态和非模态窗口

IE:支持模态和非模态窗口

Firefox:不支持

解决方法:直接使用window.open(pageURL,name,parameters)方式打开新窗口。如果需要将子窗口中的参数传递回父窗口,可以在子窗口中使用window.opener来访问父窗口。

15.innerText

IE:innerText

Firefox:textContent

16.类似 obj.style.height = imgObj.height 的语句

IE:有效

Firefox:无效

解决方法:统一使用obj.style.height = imgObj.height + ‘px‘;

时间: 2024-10-06 05:44:14

IE && W3C的相关文章

关于W3C盒子布局

在学校老师出国一道题: 第一个div盒子,id为box, 宽度300px, 第二个div盒子在第一个div盒子的内部,id为div1,宽度200px, 第三个div盒子在第一个div盒子的内部,id为div2,宽度需计算, 三个盒子的border:1px solid red; 左浮动, 内外边距各5px 这道题主要是考盒子的计算: <!doctype html> <html lang="ch"> <head> <meta charset=&qu

w3c标准及规范

一.目的: 为什么要遵循标准我们作为生产者实际上只是位于中游,既不是上游的浏览器制造商,他们是标准的真正制定者,也不算是下游,他们是浏览器的终端使用者.这个角色就意味着我们位于一个接口的位置,我们需要想办法满足下游的用户使用上游不同浏览器时看到的是同样的内容.用一个程序的语言说,我们是转换器--adapter,我们想方设法让我们的页面.我们的程序能够支持所有的浏览器.能够满足尽可能多的用户.我们要满足所有的客户,即使做不到,我们也要满足我们技术范围之内的所有用户. 二.目标一个标准制作的网站,让

标准W3C盒子模型和IE盒子模型

标准W3C盒子模型和IE盒子模型 CSS盒子模型:网页设计中CSS技术所使用的一种思维模型. CSS盒子模型组成:外边距(margin).边框(border).内边距(padding).内容(content). CSS盒子模型分为:标准W3C盒子模型,IE盒子模型,注意在两种模型中宽(width)和高(height)包括属性的不同. 标准W3C盒子模型: W3C模型中: CSS中的宽(width)=内容(content)的宽 CSS中的高(height)=内容(content)的高 eg: <d

&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;详解

每次写html页面开头基本都会加上这么两行: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> ************************

标准W3C盒子模型和IE盒子模型CSS布局经典盒子模型(转)

盒子模型是css中一个重要的概念,理解了盒子模型才能更好的排版.其实盒子模型有两种,分别是 ie 盒子模型和标准 w3c 盒子模型.他们对盒子模型的解释各不相同,先来看看我们熟知的标准盒子模型: 从上图可以看到标准 w3c 盒子模型的范围包括 margin.border.padding.content,并且 content 部分不包含其他部分. ie 盒子模型 从上图可以看到 ie 盒子模型的范围也包括 margin.border.padding.content,和标准 w3c 盒子模型不同的是

javascript 兼容W3c和IE的添加(取消)事件监听方法

事件作为javascript本身的一个必备功能,在目前javascript的使用中是无处不在的,基本要只要写到javascrpt,就会用到javascript事件.下面就说说javascript中的添加事件监听和取消事件监听的方法,当然也要做到兼容W3c和IE.下面是兼容的代码: [javascript] view plain copy //添加事件监听兼容函数 function addHandler(target, eventType, handler){ if(target.addEvent

IE和W3c盒模型

盒子模型是css中一个重要的概念,理解了盒子模型才能更好的排版.其实盒子模型有两种,分别是 ie 盒子模型和标准 w3c 盒子模型.他们对盒子模型的解释各不相同,先来看看我们熟知的标准盒子模型: 从上图可以看到标准 w3c 盒子模型的范围包括 margin.border.padding.content,并且 content 部分不包含其他部分. ie 盒子模型 从上图可以看到 ie 盒子模型的范围也包括 margin.border.padding.content,和标准 w3c 盒子模型不同的是

Android学习笔记(四五):互联网通信-HttpClient、XML解析(W3C)

前几日Android发布了4.0 Icecream,昨天上网发现Begining Book中有Edition 3的版本,比对一下,还是有相当的改动,不仅仅增加了tablet的部分,对原有的章节有有一些修订,前后的调整等等.先按Edtion 2的顺序看,相同章节的看Edtion 3,然后回头看Edition 3的Chapter 24.25(E2的36).26.27.28.29.44.45.46.47几个新增章节.同时将模拟器改为Android 2.3的版本,已适应可能新增的改动. 访问Intern

web前端面试--对web标准以及W3C标准的理解

答.web标准不是某一个标准,而是一系列标准的集合.网页主要由结构.表现.行为三部分组成,对应的标准有结构化标准语言有XHTML.xml,表现的标准语言有CSS,行为的标准有对象模型(如 w3c dom).ECMAScripe等 w3c的原则: 网站要通过W3C标准,需要注意以下几个问题: 1.XHTML 1.0文件类别宣告的正确写法 (不可小写) A:过度标准(Transitional) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans

org.w3c.dom(java dom)解析XML文档

位于org.w3c.dom操作XML会比较简单,就是将XML看做是一颗树,DOM就是对这颗树的一个数据结构的描述,但对大型XML文件效果可能会不理想 首先来了解点Java DOM 的 API:1.解析器工厂类:DocumentBuilderFactory 创建的方法:DocumentBuilderFactory dbf = DocumentBuilderFactory.newInstance(); 2.解析器:DocumentBuilder 创建方法:通过解析器工厂类来获得 DocumentBu