IE6 下 DD_belatedPNG 引发的血案

群里一朋友Q我,说遇到兼容性问题了,我说为何不用jQuery呢(因为他们公司要求尽量js写)。
他说用了,还是有问题,IE6下不行,其他都行、
然后他发我代码,我一开始真以为是兼容性问题,比如数组对象最后的逗号,如:

1
2
var arr = [1, 2, 3,];
var obj = {a:1, b:2, c:3,};

这个在IE8-下是不行的,其他浏览器却没问题、(这些天好多人问我,发现都是这个问题,所以潜意识以为是了)
可是找遍了对象数组,也没发现问题,然后开始顺藤摸瓜去读他写的代码、
依然没发现兼容性问题、
最后没办法 alert 大法、
发现不是我要的元素,也不是页面上的元素、
我就郁闷了,最后看html才发现,

1
2
3
4
5
6
<!--[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元素

1
2
3
4
5
<?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 就可以了,不是很方便么、

 

posted @   楼教主  阅读(543)  评论(4编辑  收藏  举报
编辑推荐:
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
阅读排行:
· 地球OL攻略 —— 某应届生求职总结
· 周边上新:园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源!
· .NET周刊【3月第1期 2025-03-02】
· [AI/GPT/综述] AI Agent的设计模式综述
js output×
点击右上角即可分享
微信分享提示