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 就可以了,不是很方便么、
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 如何编写易于单元测试的代码
· 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的设计模式综述