浏览器兼容问题汇总整理 ie,chrome,firefox...
2013-04-17 06:28
696 查看
document.compatMode
document的compatMode指示当前文档的盒子模型。有两个值:“BackCompat”和“CSS1Compat”。当文档中用DOCTYPE明确声明了当前文档是XHTML格式时,这个属性将是“CSS1Compat”。否则,是“BackCompat”。
compatMode影响CSS盒子的呈现形式,对在精确的UI定位中需要特别注意。“CSS1Compat”是按符合W3C标准的盒子模型来呈现的。
IE的特殊性
IE的DOM元素属性与Firefox, Opera, Safari有些不同。在IE中,我们可以给DOM添加任意自定义的属性,但却不能用delete操作符删除这个添加的属性,要删除自定义属性必须用DOM元素的removeAttribute方法。
IE中DOM对象的属性与其标签中的属性是相同的。因此,dom.setAttribute("myattr", "yeah") 与 dom.myattr = "yeah" 是完全等效的,也可以这样<... myattr="yeah" ...>直接在标签中写自定属性。
而Firefox, Opera, Safari中DOM元素的属性与标签特性(Attribute)是两个不同的概念,二者并无直接联系。
Opera的特殊性:
Opera 9.5 及之前版本的function没有caller属性,而IE, Firefox, Safari一直都有。
Opera 9.6及之后的版本中,function已经支持caller属性!
在对待eval()和window.eval()的问题上,Opera与其他三种浏览器有区别。
IE, Firefox, Safari似乎并不刻意区分eval()和window.eval()两种写法,他们都是在当前作用域内解析代码的,执行效果一样。
而Opera中的eval()和window.eval()是有区别的。使用eval()时,是在当前作用域里解释代码的;而使用window.eval()时,是在根作用域里解释代码的。
outerHTML
Firefox的DOM元素没有outerHTML属性,而IE, Opera和Safari都有这一属性。
innerText
IE, Opera和Safari都支持DOM元素的innerText属性,而Firefox不支持着一属性。Firefox中有textContent属性,与其他浏览器的innerText属性类似。
textContent
Firefox, Opera和Safari都支持DOM元素的textContent属性,而IE没有这一属性。在IE中是用innerText属性来操作。Opera和Safari两边倒,既支持innerText也支持textContent。
onmouseleave
onmouseleave事件只有IE的DOM元素才有。
而onmouseout事件是IE, Firefox, Opera 和 Safari 都有的,因此请使用onmouseout事件,而不要用onmouseleave事件。
constructor
IE的DOM元素没有constructor属性,而Firefox, Chorme, Opera, Safari都有constructor属性。
对于Firefox的DOM元素,其constructor属性是一个内置对象,其typeof值是'object'。
对于Chrome的DOM元素,其constructor属性是一个内置函数,其typeof值是'function'。
对于Opera的DOM元素,其constructor属性是Object()函数,其typeof值是'function'。
对于Safari的DOM元素,其constructor属性是一个内置对象,其typeof值是'object'。
值得注意的是,尽管Chrome和Safari都采用了Webkit内核,但其DOM元素的结构还是有些不同的。
document的compatMode指示当前文档的盒子模型。有两个值:“BackCompat”和“CSS1Compat”。当文档中用DOCTYPE明确声明了当前文档是XHTML格式时,这个属性将是“CSS1Compat”。否则,是“BackCompat”。
compatMode影响CSS盒子的呈现形式,对在精确的UI定位中需要特别注意。“CSS1Compat”是按符合W3C标准的盒子模型来呈现的。
IE的特殊性
IE的DOM元素属性与Firefox, Opera, Safari有些不同。在IE中,我们可以给DOM添加任意自定义的属性,但却不能用delete操作符删除这个添加的属性,要删除自定义属性必须用DOM元素的removeAttribute方法。
IE中DOM对象的属性与其标签中的属性是相同的。因此,dom.setAttribute("myattr", "yeah") 与 dom.myattr = "yeah" 是完全等效的,也可以这样<... myattr="yeah" ...>直接在标签中写自定属性。
而Firefox, Opera, Safari中DOM元素的属性与标签特性(Attribute)是两个不同的概念,二者并无直接联系。
Opera的特殊性:
Opera 9.5 及之前版本的function没有caller属性,而IE, Firefox, Safari一直都有。
Opera 9.6及之后的版本中,function已经支持caller属性!
在对待eval()和window.eval()的问题上,Opera与其他三种浏览器有区别。
IE, Firefox, Safari似乎并不刻意区分eval()和window.eval()两种写法,他们都是在当前作用域内解析代码的,执行效果一样。
而Opera中的eval()和window.eval()是有区别的。使用eval()时,是在当前作用域里解释代码的;而使用window.eval()时,是在根作用域里解释代码的。
outerHTML
Firefox的DOM元素没有outerHTML属性,而IE, Opera和Safari都有这一属性。
innerText
IE, Opera和Safari都支持DOM元素的innerText属性,而Firefox不支持着一属性。Firefox中有textContent属性,与其他浏览器的innerText属性类似。
textContent
Firefox, Opera和Safari都支持DOM元素的textContent属性,而IE没有这一属性。在IE中是用innerText属性来操作。Opera和Safari两边倒,既支持innerText也支持textContent。
onmouseleave
onmouseleave事件只有IE的DOM元素才有。
而onmouseout事件是IE, Firefox, Opera 和 Safari 都有的,因此请使用onmouseout事件,而不要用onmouseleave事件。
constructor
IE的DOM元素没有constructor属性,而Firefox, Chorme, Opera, Safari都有constructor属性。
对于Firefox的DOM元素,其constructor属性是一个内置对象,其typeof值是'object'。
对于Chrome的DOM元素,其constructor属性是一个内置函数,其typeof值是'function'。
对于Opera的DOM元素,其constructor属性是Object()函数,其typeof值是'function'。
对于Safari的DOM元素,其constructor属性是一个内置对象,其typeof值是'object'。
值得注意的是,尽管Chrome和Safari都采用了Webkit内核,但其DOM元素的结构还是有些不同的。
相关文章推荐
- CSS浏览器兼容问题整理(IE6.0、IE7.0+ 与 FireFox)
- WEB前端:浏览器(IE+Chrome+Firefox)常见兼容问题处理--03
- Chrome firefox ie等浏览器空格( )兼容问题
- PC端各浏览器布局兼容问题【Chrome、Firefox、IE】——长期更新
- CSS浏览器兼容问题整理(IE6.0、IE7.0+ 与 FireFox)(一)
- WEB前端:浏览器(IE+Chrome+Firefox)常见兼容问题处理--01
- CSS浏览器兼容问题整理(IE6.0、IE7.0+ 与 FireFox)(二)
- CSS浏览器兼容问题整理(IE6.0、IE7.0+ 与 FireFox)(三)
- JSF1.2页面跳转时,IE和Chrome,FireFox浏览器不兼容的一个小问题
- CSS浏览器兼容问题整理(IE6.0、IE7.0+ 与 FireFox)(四)
- 常见浏览器兼容问题及相关解决方法(chrome/IE/firefox)
- WEB前端:浏览器(IE+Chrome+Firefox)常见兼容问题处理--02
- div+CSS浏览器兼容问题整理(IE6.0、IE7.0 ,ie8 , FireFox...) 四
- IE内嵌google chrome frame解决浏览器兼容问题
- IE与firefox浏览器兼容问题
- (转)最全的CSS浏览器兼容问题整理(IE6.0、IE7.0 与 FireFox)
- [JavaScript] 兼容IE、FireFox、Chrome等浏览器的xml处理函数(xml同步/异步加载、xsl转换、selectSingleNode、selectNodes)
- ie和firefox浏览器css兼容问题
- 最全的CSS浏览器兼容问题整理(IE6.0、IE7.0 与 FireFox)