前端浏览器JavaScript及CSS兼容总结

一、 getElementById

【标准参考】

getElementById 是 Document 接口提供的方法,用于获取一个元素,该方法传入的参数应该是目标元素的 id 属性的值,目标元素的 id 是一个大小写敏感的字符串,并且该 id 在文档内应该是唯一的。

【问题描述】

但是在 IE6 IE7 IE8(Q) 中,支持以 document.getElementById(elementName) 的方式获取 name 属性值为 elementName 的 A APPLET BUTTON FORM IFRAME IMG INPUT MAP META OBJECT EMBED SELECT TEXTAREA 元素,且id 是大小写不敏感的。

【造成影响】

该问题将导致在非IE浏览器内无法获取到目标元素。

【解决方案】

在使用 document.getElementById 方法获取页面元素时,应传入元素的 id 属性值,而不能使用元素的 name 属性值,且严格区分大小写。同时需注意页面中的元素的 id 属性值不能与其他元素的 name 属性值有重复。

另外,与getElementById 一样,标准的getElementsByName是区分大小写的,但是在IE下却不区分,所以我们使用时最好严格区分大小写。

二、 IE 在创建 DOM 树时会忽略某些空白字符

【标准参考】

Node(节点)不仅包括元素节点,也包含文本节点、注释节点、属性节点等等,节点的类型可以使用 nodeType 来区分。

在 HTML 源代码中,位于标签之内以及标签之间的文本(包括空白字符)将被创建为文本节点。

【问题描述】

IE 在创建 DOM 树时,会忽略某些空白字符,因此会比其他浏览器少创建一些文本节点。反过来说,同样的一篇文档,其他浏览器将比 IE 多创建一些文本节点。

【造成影响】

用户针对 IE 设计的脚本如果使用节点对象的 nodeList、firstChild、lastChild、previousSibling 或 nextSibling 方法,可能会因为此问题而无法在其他浏览器中达到相同的目的,如脚本执行出错,或对错误的目标对象进行了操作。

【解决方案】

1、没有必要时尽量去掉各标签之间的空白字符。

因为页面脚本多是对“元素节点”进行操作,因此只要保证各元素之间没有文本节点(即源代码中的标签之间没有空白字符——包括空格符、换行符、制表符),就能使上述各属性在各浏览器中的行为一致。

另外,使用脚本创建并顺次添加的元素,他们本身就是紧密相联的,各元素之间并没有文本节点,因此这种情况也不必担心上述兼容性问题,如:

2、在获取节点时做类型判断。

无法保证各元素之间没有文本节点时,则需要在针对节点的操作上添加类型判断。

另外,在非IE中,还可以使用previousElementSibling 和 nextElementSibling 获取元素节点,例如:以 Element.nextElementSibling 取得与元素 Element 的相邻的下一个元素节点。

三、document、document.body、document.documentElement对象的onscroll事件差异

【标准参考】

scroll 事件会在文档或一个元素滚动时触发。

【问题描述】

各浏览器对于 document、document.body、document.documentElement 对象的 onscroll 事件的支持存在差异

所有浏览器支持 window和普通DIV对象的 scroll 事件;

在IE、Opera 中,document和document.body 对象支持 scroll 事件。其他浏览器中不支持;

在 IE中,document.documentElement 对象支持 scroll 事件。其他浏览器中不支持。

【造成影响】

为 document、document.body、document.documentElement 对象绑定 onscroll 事件后在不同浏览器中可能不会按预期触发相应的事件处理函数。

【解决方案】

在给整个浏览器窗口绑定滚动事件 (scroll) 的时候,绑定到 window 对象上。

四、仅 IE 中的 createElement 方法支持传入 HTML String 做参数

【标准参考】

根据 W3C DOM Level2 Core 规范中的描述,Document 接口下的 createElement 方法可以创建一个元素节点对象实例。它可以传入一个字符串参数 tagName,在 HTML 中,这个参数可以是任何形式,必须是映射到可由 DOM 实现的符合规范的大写形式。即,tagName 应为一个合法的标签名。若 tagName 中出现不合法的字符,则应抛出 INVALID_CHARACTER_ERR 异常。

【问题描述】

在 IE6 IE7 IE8 中,createElement 方法不仅可以通过合法的标签名创建节点对象,还可以通过传入一段合法的 HTML 代码字符串作为参数创建节点对象。

【造成影响】

若使用了 IE 特有的通过为 createElement 传入一段合法的 HTML 代码字符串作为参数创建节点对象的方法,则在其他浏览器中将会抛出异常,并导致后续代码无法执行。

【解决方案】

对于一般的非替换元素,在各浏览器中均使用 W3C 规范中的标准的为 createElement 方法传入标签名的做法。

对于一些 IE 处理有问题的替换元素,则注意判断浏览器,针对 IE 使用其特有的通过为 createElement 传入一段合法的 HTML 代码字符串作为参数的方法,非 IE 浏览器仍然使用 W3C 规范的标准方法,例如:

不兼容代码,仅IE支持:

Var iframe = document.createElement(‘<iframe name="iframe">‘)

修改后:

var iframe = (document.all) ? document.createElement(‘<iframe name="iframe">‘) : document.createElement(‘iframe‘);

iframe.name = "iframe";

五、DOM 对象的 outerHTML、innerText、outerText 属性

【标准参考】

outerHTML 最初是由 IE 浏览器实现的私有属性,详细内容请参见 MSDN 说明:outerHTML Property。

W3C 的 HTML5 规范草案中也新加入了这个属性,它描述的是元素本身以及它的内容。当用一个字符串设置 DOM 元素的这个属性时,字符串会被当作 HTML 代码来渲染并替换这个 DOM 元素。

目前,主流浏览器中,只有 Firefox 不支持 outerHTML 属性。

【问题描述】

Firefox 不支持 DOM 对象的 outerHTML、innerText、outerText 属性

【造成影响】

在 Firefox 中使用 outerHTML、innerText、outerText 属性会使脚本程序报错。

【解决方案】

暂无,应尽量避免使用。

六、IE6 IE7 IE8 Opera 支持除 INPUT 和 BUTTON 元素以外的其他元素的 ‘click‘ 方法

【标准参考】

"click" 方法用于模拟一个鼠标点击事件,可应用于 "type" 属性值为 "button" "checkbox" "radio" "reset" "submit" 的 INPUT 元素上,其他元素的 "click" 方法规范中并没有提及。

【问题描述】

IE6 IE7 IE8 Opera 支持除 INPUT 和 BUTTON 元素以外的其他元素的 "click" 方法,这使得各浏览器对除 INPUT 和 BUTTON 元素以外的其他元素的 "click" 的支持情况存在差异。

【造成影响】

由于各浏览器对除 INPUT 和 BUTTON 元素以外的其他元素的 "click" 方法的支持情况存在差异,将导致除 INPUT 和 BUTTON 元素以外的其他元素的 "click" 方法模拟的鼠标点击所触发的函数在某些浏览器中不能得到响应。

【解决方案】

建议尽量避免对除 INPUT 和 BUTTON 元素以外的其他元素通过 "click" 方法模拟鼠标点击事件。

如需对其元素使用 "click" 方法触发 "onClick" 事件处理程序,可以通过以下两种方式解决:

* 由于大多数情况下调用 "click" 方法所实现的无非是执行某一元素所绑定的事件处理函数,因此可以直接调用该元素所对应的 "click" 事件处理函数。

* 或者使用 DOM-Level-2-Events 标准内 DocumentEvent interface 、Event interface 和 Event registration interfaces 相关定义中的 "createEvent" " initEvent" 以及 "dispatchEvent"方法建立 "click" 事件并派发出去。如:

function createEvent (eventTarget,eventName){

try{

if(eventTarget.dispatchEvent){

var evt = document.createEvent("MouseEvents");

evt.initEvent(eventName,false,true);

eventTarget.dispatchEvent(evt);

}else if(eventTarget.fireEvent){

eventTarget.fireEvent(‘on‘+eventName);

}else{

eventTarget[ type ]();

}

}catch(e){

alert(e);

}

}

createEvent(HTMLElement,‘click‘);

八、CSS hack的兼容总结

CSS hack是指我们为了兼容各浏览器,而使用的特别的css定义技巧。(注:不是迫不得已,应该尽量不要使用css hack,因为它的向前兼容是未知的。好的办法是学好web标准设计,从根本上进行进行兼容性设计。)下表我是结合许多资料和实践用html代码编写的表格,方便扩充和更新,但文档中不好显示,故分为两次截图:

先来个简单的区分IE浏览器和其他浏览器的例子: color:red; (所有浏览器支持) color:red\9; (IE均支持) color:red\0; (IE8支持) *color:red; (IE6/IE7支持) *+color:red; (IE7支持) _color:red; (IE6支持)

时间: 2024-10-18 06:46:57

前端浏览器JavaScript及CSS兼容总结的相关文章

15款不容错过的前端开发Javascript和css类库 - 2017版本~

前端的JS和CSS类库日新月异, 在今天这篇介绍中,我们将精挑细选15款超棒的JS/CSS类库, 希望大家在开发过程中会觉得有帮助~ Core UI 基于Bootstrap4的一套UI类库, CoreUI是一套admin的管理模板,提供了高定制化的解决方案来创建控制模板和平台. 这有几种不同的版本帮助你快速的整合最流行的框架,比如, AngularJS, React.jS,Vue.jS等等 React Trend 来自Unsplash的一个react版本的组件,用来方便的创建线图,可以方便的展示

【转】Web前端浏览器兼容初探

原文地址:http://blog.jobbole.com/38638/ 前言 浏览器兼容是前端开发人员必须掌握的一个技能,但是初入前端的同学或者其他后台web开发同学往往容易选择忽略,而形成两个极端: 1 我最开始都是使用IE6,IE6上没问题,其它浏览器坑爹(多出现与前端后端一起搞的同学,小生2年前就这种状态,鼓励人家用ie6....) 2 我要遵循标准,我只要ff就好,IE就是坑爹的玩意,我不必去理他(小生一年前的心态...) 现在看来,之前的想法都是不对的,我们诚然应该追求最新的浏览器使用

前端html、Javascript、CSS技术小结

简单地总结了一下前端用过的html.javascript.css技术,算是清点一下,做个大略的小结,为进一步的学习给个纲领. 一.HTML 由于HTML5的兴起,简单地判断一个网页是否是html5网页,只需要找找内部是否有html5的标志性标签就行了.然而平时虽然写了不少html,却没怎么关注它的发展史: GML(Generalized Marcup Language)通用标记语言 和SGML(Standard Generalized Markup Language)标准通用标记语言. 由Tim

[转]Web前端浏览器兼容

转自: http://www.admin10000.com/document/1900.html 前言 浏览器兼容是前端开发人员必须掌握的一个技能,但是初入前端的同学或者其他后台web开发同学往往容易选择忽略,而形成两个极端: 1 我最开始都是使用IE6,IE6上没问题,其它浏览器坑爹(多出现与前端后端一起搞的同学,小生2年前就这种状态,鼓励人家用ie6....) 2 我要遵循标准,我只要ff就好,IE就是坑爹的玩意,我不必去理他(小生一年前的心态...) 现在看来,之前的想法都是不对的,我们诚

Web前端浏览器兼容初探

提示:喜欢前端及设计的话,请多关注 设计师零张,微博地址:weibo.com/510zhang 个人网站地址:http://www.0zhang.com/ 前言 浏览器兼容是前端开发人员必须掌握的一个技能,但是初入前端的同学或者其他后台web开发同学往往容易选择忽略,而形成两个极端: 1 我最开始都是使用IE6,IE6上没问题,其它浏览器坑爹(多出现与前端后端一起搞的同学,小生2年前就这种状态,鼓励人家用ie6....) 2 我要遵循标准,我只要ff就好,IE就是坑爹的玩意,我不必去理他(小生一

CSS兼容各浏览器的hack

CSS兼容各浏览器的hack:建议:尽可能的手写代码,可以有效的提高学习效率和深度.浏览器的种类多,麻烦自然也多,主要是各种浏览器对某些属性的渲染效果并不相同,所以有时候需要专门针对特定浏览器或者特定版本书写CSS代码,这样就需要用到所谓的“CSS Hack”,下面以一段实例的形式介绍一下个浏览器hack. <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content

【转载】各浏览器CSS兼容问题

CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并 整理了一下.对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加 DOCTYPE声名. CSS技巧 1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了.缺点是要控制内容

[转载]网站前端性能优化之javascript和css——网站性能优化

之前看过Yahoo团队写的一篇关于网站性能优化的文章,文章是2010年左右写的,虽然有点老,但是很多方面还是很有借鉴意义的.关于css的性能优化,他提到了如下几点: CSS性能优化 1.把样式表置于顶部 现把样式表放到文档的< head />内部似乎会加快页面的下载速度.这是因为把样式表放到< head />内会使页面有步骤的加载显示. 注重性能的前端服务器往往希望页面有秩序地加载.同时,我们也希望浏览器把已经接收到内容尽可能显示出来.这对于拥有较多内容的页面和网速较慢的用户来说特

div+css 兼容ie6 ie7 ie8 ie9和FireFox Chrome等浏览器方法(非原创)

div+css 兼容ie6 ie7 ie8 ie9和FireFox Chrome等浏览器方法 1.DOCTYPE 影响 CSS 处理 2.FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行 3.FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中 4.FF: 设置 padding 后, div 会增加 height 和 wi