Javascript兼容性问题汇总
一、属性相关
我们通常把特征(attribute)和属性(property)统称为属性,但是他们确实是不同的概念,
特征(attribute)会表现在HTML文本中,对特征的修改一定会表现在元素的outerHTML中,并且特征只存在于元素节点中;
属性(property)是对于JS对象进行修改,除了浏览器内置的部分特征外,其它的属性操作并不会影响HTML文本。
IE6/7不区分属性和特征
其它浏览器会区分属性和特征,而IE67并不会区分它们,在IE67下我们只能用属性名来删除特征,虽然这两个名字很多时候一样,但总会有不一样的地方。
IE6/7不能通过getAttribute/setAttribute来操作值不为字符串的特征
在现代浏览器中getAttribute一定会返回HTML中对应的字符串,而IE67返回的结果不可预知,因此在IE67下,我们要用AttributeNode来操作属性。
IE6/7/8不能通过style属性来获取CSS文本
这个问题应当是IE6/7不区分属性和特征的后遗症,在获取style这个属性的时候,使用elem.style.cssText就好了。
IE6/7会解析相对URL成为绝对URL
这个问题甚至导致了IE6/7下空的src属性会产生重复的请求,可以使用getAttribute('href/src', 4)。
元素特征的默认行为不同
这一类的BUG会比较多,比如在一些旧的webkit浏览器里面,checkbox/radio 的默认值为""
,而不是on。
在一些旧的webkit浏览器select的第一个元素不会被选中。
二、样式操作
通常情况下,样式包括获取和设置行内样式以及获取元素的计算出的样式
IE支持background-position-x/y而其它浏览器不支持
background-position-x/y可以用来方便的渐变一个图片的位置,不支持的情况下我们可以考虑使用解析background-position属性的来处理。
IE6/7不支持opacity属性
可以通过alpha滤镜来实现相同的效果,不过要记得触发元素的haslayout。
IE6/7/8会错误的让clone产生的节点继承一些属性
比如background,修改一个两个同时会改。
不同的获取计算出样式的方式
IE6/7/8使用elem.currentStyle而其它浏览器要用window.getComputedStyle函数。
不同的像素化方式
像素化指的是将单位不是像素的距离转换成像素,以方便进行计算。严格的说这不是一个兼容性问题,但可能全用到。
在IE6/7/8中,我们可以使用elem.runtimeStyle配合pixelLeft来进行处理。
而现代浏览器可以使用width属性处理。
一些获取CSS时的BUG行为
在Webkti核心的浏览器中,margin-right经常会出错。
查询操作
查询通过指的是通过一些特征字符串来找到一组元素,或者判断元素是不是满足字符串。
IE6/7不区分id和name
在IE6/7下使用getElementById和getElementsByName时会同时返回id或name与给定值相同的元素。
由于name通常由后端约定,因此我们在写JS时,应保证id不与name重复。
IE6/7不支持getElementsByClassName和querySelectorAll
这两个函数都是从IE8开始支持的,因此在IE6/7下,我们实际可以用的只有getElementByTagName。
IE6/7不支持getElementsByTagName('*')会返回非元素节点
要么不用*,要么自己写个函数过滤一下。
IE8下querySelectorAll对属性选择器不友好
几乎所有浏览器预定义的属性堵了有问题,尽量使用自定义属性或者不用属性选择器。
IE8下querySelectorAll不支持伪类
有时候伪类是很好用的,但是IE8并不支持,同时要注意,jquery提供的:first、:last、:even、:odd、:eq、:nth、:lt、:gt并不是伪类,我们在任何时间都不要使用它们。
IE9的matches函数不能处理不在DOM树上的元素
只要元素不在dom树上,一定会返回false,实在不行把元素丢在body里面匹配完了再删掉吧,当然了我们也可以自己写匹配函数以避免回流。
事件操作
通常一问大家JS的兼容性,第一反应都会是attachEvent和addEventListener,但是关于这两个函数的区别,也还是有很多的细节。
事件作用对象不同
addEventListener为事件冒泡到的当前对象,而attachEvent是window。
事件参数对象不同
一定要注意,attachEvent绑定的函数有参数e,不要再写e = e || event了,不过两者的参数属性有很多的差别,如button还是witch,支持不支持pageY等等。
万恶的滚轮事件
滚轮事件的支持可谓是乱七八糟,规律如下:
IE6-11 chrome mousewheel wheelDetla 下 -120 上 120
firefox DOMMouseScroll detail 下3 上-3
firefox wheel detlaY 下3 上-3
IE9-11 wheel deltaY 下40 上-40
chrome wheel deltaY 下100 上-100
三大不冒泡事件
所有浏览器的focus/blur事件都不冒泡,万幸的是大部分浏览器支持focusin/focusout事件,不过可恶的firefox连这个都不支持。
IE678下submit事件不冒泡。
IE678下change事件要等到blur时才触发。
而我们没有什么有效的手段去解决这三个问题,只能通过模拟触发的方式来处理。
a.click()
这方法在很多浏览器下都不安全,一执行哪怕阻止了默认行为,还是会造成页面跳转。
节点操作
节点操作通常指的是复制、生成一个节点或者移动节点的位置。
innerHTML
IE6/7/8使用innerHTML时必须在前面有一个文本节点,不然会造成很多标签丢失。另外很多情况下使用innerHTML会造成defaultValue属性出错。
无用的tbody
IE6/7/8会给空的table自动加一个空的tbody
cloneNode时会复制attachEvent的事件
并且除非我们记录了我们绑定的事件,否则我们没办法解绑他们。
Javascript兼容性问题汇总的更多相关文章
- IE和Firefox的Javascript兼容性总结
长久以来JavaScript兼容性一直是Web开发者的一个主要问题.在正式规范.事实标准以及各种实现之间的存在的差异让许多开发者日夜煎熬.为此,主要从以下几方面差异总结IE和Firefox的Javas ...
- 【总结】IE和Firefox的Javascript兼容性总结(转)
文章转自:http://www.cnblogs.com/wiky/archive/2010/01/09/IE-and-Firefox-Javascript-compatibility.html 长久以 ...
- [ 兼容 ] IE和Firefox的Javascript兼容性总结
长久以来JavaScript兼容性一直是Web开发者的一个主要问题.在正式规范.事实标准以及各种实现之间的存在的差异让许多开发者日夜煎熬.为此,主要从以下几方面差异总结IE和Firefox的Javas ...
- javascript中event汇总
原文:javascript中event汇总 ie firefox chrome opera Safari浏览器中对 event的处理并不一致,在此我将各个浏览器中event的兼容处理做了一个汇总,此处 ...
- 【总结】IE和Firefox的Javascript兼容性总结
长久以来JavaScript兼容性一直是Web开发者的一个主要问题.在正式规范.事实标准以及各种实现之间的存在的差异让许多开发者日夜煎熬.为此,主要从以下几方面差异总结IE和Firefox的Javas ...
- javascript常用知识汇总
javascript这个语言庞大而复杂,我用了三年多了,还是皮毛都不会.从刚开始的jquery,到后来的es6,每天都在学习,每天都在忘记. 1.禁止手机虚拟键盘弹出 在开发适配手机的页面时,出现了这 ...
- JavaScript数组方法的兼容性写法 汇总:indexOf()、forEach()、map()、filter()、some()、every()
ECMA Script5中数组方法如indexOf().forEach().map().filter().some()并不支持IE6-8,但是国内依然有一大部分用户使用IE6-8,而以上数组方法又确实 ...
- JavaScript兼容性汇总
一般兼容性问都体现到DOM和事件上 只聊ie6+版本浏览器,希望小伙伴们别纠结更低版本浏览器哈^_^ DOM 获取元素 document.getElementsByclassName 不兼容ie6 ...
- JS的IE和FF兼容性问题汇总
转自:蓝色理想 以下以 IE 代替 Internet Explorer,以 MF 代替 Mozilla FF 一.函数和方法差异 1. getYear()方法 [分析说明]先看一下以下代码: var ...
随机推荐
- zen coding
zen-Coding是一款快速编写HTML,CSS(或其他格式化语言)代码的编辑器插件,这个插件可以用缩写方式完成大量重复的编码工作,是web前端从业者的利器. zen-Coding插件支持多种编辑器 ...
- ABP框架应用-MySQL数据库集成
1. 框架以外依赖包引入 1.1. Pomelo.EntityFrameworkCore.MySql 1.2. Pomelo.EntityFrameworkCore.MySql.Design 2 ...
- kylin 连接 hortonworks 中的 hive 遇到的问题
用 hortonworks(V3.1.0.0) 部署了 ambari (V2.7.3),用 ambari 部署了 hadoop 及 hive. 1. 启动 kylin(V2.6)时,遇到如下问题: ...
- jzoj4918. 【GDOI2017模拟12.9】最近公共祖先 (树链剖分+线段树)
题面 题解 首先,点变黑的过程是不可逆的,黑化了就再也洗不白了 其次,对于\(v\)的祖先\(rt\),\(rt\)能用来更新答案当且仅当\(sz_{rt}>sz_{x}\),其中\(sz\)表 ...
- ADX3000二层的负载均衡设计问题
我的想法是 想在现有的局域网内部,利用ADX划分出一个新的局域网,模拟负载均衡. 现在有三台试验机器,拓扑图如下: 各个机器IP设置如下图: 我进行了如下的操作: 1 在组网配置当中,设置eth1_0 ...
- Can't connect to local MySQL server through socket '/var/lib/mysql/mysql.socket
一.解决var/run/mysqld没有pid和sock文件 MySQL下mysql.sock丢失丢失的原因一般是因为配置文件不一致的原因,mysqld 错误启动,mysqld_safe 会清除一次m ...
- vue file-loader vs url-loader
1.前言 如果我们希望在页面引入图片(包括img的src和background的url).当我们基于webpack进行开发时,引入图片会遇到一些问题. 其中一个就是引用路径的问题.拿backgroun ...
- Hystrix线程隔离技术解析-线程池(转)
认识Hystrix Hystrix是Netflix开源的一款容错框架,包含常用的容错方法:线程隔离.信号量隔离.降级策略.熔断技术. 在高并发访问下,系统所依赖的服务的稳定性对系统的影响非常大,依赖有 ...
- 搜索【洛谷P2845】 [USACO15DEC]Switching on the Lights 开关灯
P2845 [USACO15DEC]Switching on the Lights 开关灯 题目背景 来源:usaco-2015-dec Farm John 最近新建了一批巨大的牛棚.这些牛棚构成了一 ...
- DP【洛谷P3089】 [USACO13NOV]POGO的牛Pogo-Cow
[洛谷P3089] [USACO13NOV]POGO的牛Pogo-Cow FJ给奶牛贝西的脚安装上了弹簧,使它可以在农场里快速地跳跃,但是它还没有学会如何降低速度. FJ觉得让贝西在一条直线的一维线路 ...