IE6 下 DD_belatedPNG 引发的血案
群里一朋友Q我,说遇到兼容性问题了,我说为何不用jQuery呢(因为他们公司要求尽量js写)。
他说用了,还是有问题,IE6下不行,其他都行、
然后他发我代码,我一开始真以为是兼容性问题,比如数组对象最后的逗号,如:
var arr = [1, 2, 3,]; var obj = {a:1, b:2, c:3,};
这个在IE8-下是不行的,其他浏览器却没问题、(这些天好多人问我,发现都是这个问题,所以潜意识以为是了)
可是找遍了对象数组,也没发现问题,然后开始顺藤摸瓜去读他写的代码、
依然没发现兼容性问题、
最后没办法 alert 大法、
发现不是我要的元素,也不是页面上的元素、
我就郁闷了,最后看html才发现,
<!--[if IE 6]> <script src="/js/DD_belatedPNG.js"></script> <script> DD_belatedPNG.fix("img,a,div,span,li,p,dt,dd,em,.sj_frist") </script> <![endif]-->
现在我知道问题在哪了,DD_belatedPNG会生成类似这样的vml元素
<?XML:NAMESPACE PREFIX=D D_belatedPNG NS="urn:schemas-microsoft-com:vml" /> <DD_belatedPNG:shape style="LEFT: 0px; WIDTH: 19px; CLIP: rect(1px 19px 19px 1px); TOP: 0px; HEIGHT: 19px" jQuery18208800624770577148="26" coordsize="19,19" coordorigin="1,1" filled="t" fillcolor="none" stroked="f" path=" m0,0 l19,0,19,19,0,19 xe"> <DD_belatedPNG:fill src="http://images.cnblogs.com/but2.png" type="tile" position="3449f,3449f"></DD_belatedPNG:fill> </DD_belatedPNG:shape> </?XML:>
虽然这样一般是影响不到的, 但是他用到了index()方法,所以就无法取得真正的索引值了、
如果有用到 children() 之类而且不加选择器的,必然也会受到影响、
所以只能在写代码的时候严谨点、
其实还有一个非常简单的方法,用 DD_belatedPNG 的时候详细指定要透明的元素、
而不是像他这样 img,a,div,span,li,p,dt,dd,em 范围太广了、
而且他的那个元素上根本就没有png图片、
所以我建议 DD_belatedPNG 的选择器写的详细些,只给用png并且透明的元素用,不然性能差不说,功能冲突就麻烦了、
比如单独给png的元素添加一个 .fixpng 的 class 这样 DD_belatedPNG.fix(".fixpng"); 就OK了,
页面上也只要加一个 class 就可以了,不是很方便么、