zoukankan      html  css  js  c++  java
  • 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 就可以了,不是很方便么、

  • 相关阅读:
    几个常用的回调方法
    a标签跳页传参,以及截取URL参数
    artTemplate/template.js模板将时间戳格式化为正常的日期
    将本地时间转换成 UTC 时间,0时区时间
    前端基本知识点
    js获取当前时区GMT
    web端创建地图
    前端面试题
    寒假学习进度05
    Spark实验汇总(七个实验相结合)
  • 原文地址:https://www.cnblogs.com/52cik/p/ie6-dd_belatedpng-bug.html
Copyright © 2011-2022 走看看