Dom与浏览器兼容性说明_DOM

作为一个Web前端工作者，你是否在工作中常被浏览器兼容性问题所困惑．例如Css样式?　明明在 IE浏览器里显示一切正常的网页．到了FireFox或谷歌浏览器中却乱作一团．或许你在使用JavaScript和Dom编写网页脚本时，也遇到过类似问题. 明明在FireFox浏览器里运行正常的脚本．到了IE里却出现错误． 比如说获取触发js事件的源目标．还有鼠标位置或元素位置问题．动态为元素绑定事件等．．．我将在下面列举部份Dom指令在IE和FireFox等浏览器 不兼容性的问题！
限于篇幅．我不在该页对提到的Dom指令做详细解释．请点击相关指令名称可以了解详细解释与实例．
在使用JavaScript获取触发事件的源目标时IE和FireFox(火狐)不同表现，也就是说是网页中那个元素触发了事件

  1. 在IE浏览器里使用srcElement
  2. 在FireFox（火狐）浏览器里使用target

使用Dom获取和更改网页标签元素内文本的问题

  1. 在IE浏览器里使用innerText
  2. 在FireFox（火狐）浏览器里使用textContent

鼠标在元素内的位置

  1. IE中使用offsetX和offsetY来获取鼠标在网页中某一元素的位置
  2. FireFox使用layerX和layerY来得到鼠标在网页中某一元素的位置

动态为网页或元素绑定与删除事件的问题

  1. 在IE中绑定事件的方法是attachEvent
  2. 在IE中删除绑定事件的方法是detachEvent
  3. 在FireFox中绑定事件的方法是addEventListener
  4. 在FireFox中删除绑定事件的方法是removeEventListener

未完待续......康董于：2010-07-24

时间： 2024-10-26 18:55:06

Dom与浏览器兼容性说明_DOM的相关文章

浏览器兼容性问题大汇总_javascript技巧

JavaScript 1.HTML对象获取问题 FireFox:document.getElementById("idName"); ie:document.idname或者document.getElementById("idName"). 解决办法:统一使用document.getElementById("idName"); 2.const问题 说明:Firefox下,可以使用const关键字或var关键字来定义常量; IE下,只能使用var

JavaScript 浏览器兼容性总结及常用浏览器兼容性分析_javascript技巧

1. children与childNodes IE提供的children.childNodes和firefox下的childNodes的行为是有区别的,firefox下childNodes会把换行和空白字符都算作父节点的子节点,而IE的childNodes和children不会.比如: <div id="dd"> <div>yizhu2000</div> </div> d为dd的div在IE下用childNodes查看,其子节点数为1,而

Javascript 多浏览器兼容性问题及解决方案_javascript技巧

CSS 多浏览器兼容性问题及解决方案 一.document.formName.item("itemName") 问题 问题说明:IE下,可以使用 document.formName.item("itemName") 或 document.formName.elements ["elementName"]:Firefox 下,只能使用document.formName.elements["elementName"]. 解决方法:

css与javascript跨浏览器兼容性总结_javascript技巧

本文以大量实例形式总结了css与javascript跨浏览器的兼容性问题.分享给大家供大家参考.具体总结如下: 一.CSS样式兼容性 1. FLOAT闭合(clearing float) 网页在某些浏览器上显示错位很多时候都是因为使用了float浮动而没有真正闭合,这也是div无法自适应高度的一个原因.如果父div没有设float而其子div却设了float的话,父div无法包住整个子DIV,这种情况一般出现在一个父DIV下包含多个子DIV.解决办法: 1) 给父DIV也设上float 2) 在

JavaScript中解决多浏览器兼容性23个问题的快速解决方法_javascript技巧

一.document.formName.item("itemName") 问题 问题说明:IE下,可以使用 document.formName.item("itemName") 或 document.formName.elements ["elementName"]:Firefox 下,只能使用document.formName.elements["elementName"]. 解决方法:统一使用document.formNa

Web字体格式介绍及浏览器兼容性一览

目前,文字信息仍是网站最主要的内容,随着CSS3技术的不断成熟,Web字体逐渐成为话题,这项让未来Web更加丰富多彩的技术拥有多种实现方案,其中之一是通过@font-face属性在网页中嵌入自定义字体,主流的浏览器都支持这项技术,本文介绍主要的几种Web字体格式及各浏览器兼容情况. Web字体格式介绍TrueType (.ttf) Windows和Mac系统最常用的字体格式,其最大的特点就是它是由一种数学模式来进行定义的基于轮廓技术的字体,这使得它们比基于矢量的字体更容易处理,保证了屏幕与打印输

win8PC浏览器兼容性抽查测试

  对于软件的Win8兼容性测试,测试的根本就在于反映出在用户使用Windows平台的软 件,在最新的Win8操作系统中普遍的兼容能力.也就是说我们需要从人们最常用和最实用的软件入手,而浏览器相信是任何平台都无法或缺的最常用.实用的软 件之一.因此测试PC浏览器的兼容问题是一个比较具有普遍代表性的方向.这里我们从众多的浏览器中抽查其中三款PC浏览器软件,并关注一下它们的兼容性表现. 浏览器就是可以显示网页服务器或者文件系统的HTML文件内容,并让用户与这些文件交互的一种软件.网页浏览器用来显示在

IETester中文免费版 – 最佳网页IE浏览器兼容性测试工具

IETester中文免费版 – 最佳网页IE浏览器兼容性测试工具(IE6 IE7 IE8共存) 对于很多拥有自己博客或者接触网页制作的朋友,肯定会遇到自己辛苦写好的页面在不同的浏览器下显示出来的效果截然不同吧,喜欢追求完美的朋友就肯定希望能尽量在不同浏览器下对页面进行测试并保证其正常显示了.当然,像FireFox.Safari.Opera等浏览器还可以随意地安装卸载,然而,最麻烦的莫过于微软的"IE"系列了. 基本上你不能用常规的方法同时在一个系统中安装IE5.IE6.IE7甚至IE8

jQuery插件里的opacity属性的浏览器兼容性

文章简介:opacity这个属性的作用是设置元素的透明度的问题的.不是一个很常用的属性,却是一个不得不注意的会引起浏览器兼容性问题的属性. opacity这个属性的作用是设置元素的透明度的问题的.不是一个很常用的属性,却是一个不得不注意的会引起浏览器兼容性问题的属性看在chrome浏览器里: 三张图片,透明度是不同的,而在ie6-8的浏览器里, opacity的浏览器兼容性如下图: 补充一下:ie9已经支持opacity这个属性了.. ie6-8浏览器不支持opacity这个属性,但是没关系,我