总结js中的一些兼容性易错的问题

一、属性相关

我们通常把特征(attribute)和属性(property)统称为属性,但是他们确实是不同的概念,

特征(attribute)会表现在HTML文本中,对特征的修改一定会表现在元素的outerHTML中,并且特征只存在于元素节点中;

属性(property)是对于JS对象进行修改,除了浏览器内置的部分特征外,其它的属性操作并不会影响HTML文本。

1. IE6/7不区分属性和特征

其它浏览器会区分属性和特征,而IE67并不会区分它们,在IE67下我们只能用属性名来删除特征,虽然这两个名字很多时候一样,但总会有不一样的地方。

2. IE6/7不能通过getAttribute/setAttribute来操作值不为字符串的特征

在现代浏览器中getAttribute一定会返回HTML中对应的字符串,而IE67返回的结果不可预知,因此在IE67下,我们要用AttributeNode来操作属性。

3. IE6/7/8不能通过style属性来获取CSS文本

这个问题应当是IE6/7不区分属性和特征的后遗症,在获取style这个属性的时候,使用elem.style.cssText就好了。

4. IE6/7会解析相对URL成为绝对URL

这个问题甚至导致了IE6/7下空的src属性会产生重复的请求,可以使用getAttribute('href/src', 4)。

5. 元素特征的默认行为不同

这一类的BUG会比较多,比如在一些旧的webkit浏览器里面,checkbox/radio 的默认值为"",而不是on。在一些旧的webkit浏览器select的第一个元素不会被选中。

二、样式操作

通常情况下,样式包括获取和设置行内样式以及获取元素的计算出的样式

1. IE支持background-position-x/y而其它浏览器不支持

background-position-x/y可以用来方便的渐变一个图片的位置,不支持的情况下我们可以考虑使用解析background-position属性的来处理。

2. IE6/7不支持opacity属性

可以通过alpha滤镜来实现相同的效果,不过要记得触发元素的haslayout。

3. IE6/7/8会错误的让clone产生的节点继承一些属性

比如background,修改一个两个同时会改。

4. 不同的获取计算出样式的方式

IE6/7/8使用elem.currentStyle而其它浏览器要用window.getComputedStyle函数。

5.不同的像素化方式

像素化指的是将单位不是像素的距离转换成像素,以方便进行计算。严格的说这不是一个兼容性问题,但可能全用到。在IE6/7/8中,我们可以使用elem.runtimeStyle配合pixelLeft来进行处理。

而现代浏览器可以使用width属性处理。

6. 一些获取CSS时的BUG行为

在Webkti核心的浏览器中,margin-right经常会出错。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/40.html