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

  

  

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

  

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

  

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

  

<强> 1。IE6/7不区分属性和特征

  

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

  

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

  

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

  

<强> 3。IE6/7/8不能通过风格属性来获取CSS文本

  

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

  

<强> 4。IE6/7会解析相对URL成为绝对URL

  

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

  

<强> 5。元素特征的默认行为不同

  

这一类的错误会比较多,比如在一些旧的webkit浏览器里面,复选框/电台的默认值为“”,而不是。在一些旧的webkit浏览器选择的第一个元素不会被选中。

  

  

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

  

<强> 1。IE支持background-position-x/y而其它浏览器不支持

  

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

  

<强> 2。IE6/7不支持不透明度属性

  

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

  

<强> 3。IE6/7/8会错误的让克隆产生的节点继承一些属性

  

比如背景、修改一个两个同时会改。

  

<强> 4。不同的获取计算出样式的方式

  

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

  

<强> 5。不同的像素化方式

  

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

  

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

  

<强> 6。一些获取CSS时的错误行为

  

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

  

  

查询通过指的是通过一些特征字符串来找到一组元素,或者判断元素是不是满足字符串。

  

<强> 1。IE6/7不区分id和名称

  

在IE6/7下使用getElementById和getElementsByName时会同时返回id或名称与给定值相同的元素,由于名字通常由后端约定,因此我们在写JS时,应保证id不与名字重复。

  

<强> 2。IE6/7不支持getElementsByClassName和querySelectorAll

  

这两个函数从IE8开始支持的,因此在IE6/7下,我们实际可以用的只有getElementByTagName。

  

<强> 3。IE6/7不支持getElementsByTagName(“*”)会返回非元素节点

  

要么不用*,要么自己写个函数过滤一下。

  

<强> 4。IE8下querySelectorAll对属性选择器不友好

  

几乎所有浏览器预定义的属性都有了问题,尽量使用自定义属性或者不用属性选择器。

  

<强> 5。IE8下querySelectorAll不支持伪类

  

有时候伪类是很好用,IE8并不支持,jquery提供的:首先,:,:,:奇怪,情商,:n, lt,: gt并不是伪类,我们在任何时间都不要使用它们。

  

<强> 6。IE9的匹配函数不能处理不在DOM树上的元素

  

只要元素不在dom树上,一定会返回假,实在不行把元素丢在身体里面匹配完了再删掉吧,当然了我们也可以自己写匹配函数以避免回流。

  

  

通常一问大家JS的兼容性,第一反应都会是attachEvent和addEventListener,但是关于这两个函数的区别,也还是有很多的细节。

  

<强> 1。事件作用对象不同
  

  

addEventListener为事件冒泡到的当前对象,而attachEvent是窗口。

  

。事件参数对象不同

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