标签 IE6 下的文章

Thumb

IE6下使用DD_belatedPNG修复透明png图片后引发的bug

首先我们必须承认使用DD_belatedPNG是目前在处理IE6下使用透明png图片的最好解决办法。这一方法在中国特色的互联网环境下,还是很有用的!但是,话说回来,这毕竟是使用第三方的脚本来进行处理的,兼容性自然不可能做到完美,自然也会存在一定的bug。下面就来说说本人在使用这一脚本后遇到的问题以及解决办法。

  1. position为relative的对象上使用,会使该对象的position的值会被替换成:absolute
    示例代码:
    <div class="png_bg" style="position:relative; background:url(xxx.png) no-repeat 0 0;"></div>

    解决办法:在这个对象外面再包裹一层,并将position放到这个包裹对象上。例:
    <div style="position:relative;">
    <div class="png_bg" style="background:url(xxx.png) no-repeat 0 0;"></div>
    </div>
  2. img对象上使用会导致onclick事件失效
    示例代码:
    <img src="xxx.png" class="png_bg" onclick="javascript:xxx();" />

    解决办法:使用链接,将onclick事件放到链接上。例:
    <a href="javascript:xxx();"><img src="xxx.png" class="png_bg" /></a>
  3. a:hover的背景图片无法修复。这个问题,是我觉得很奇怪的,因为官网上明明写着,支持a:hover的
    示例代码:
    <style>
    a{background:url(xxx.png) no-repeat 0 0;}
    a:hover{background:url(xxx_hover.png) no-repeat 0 0;}
    </style>
    <a href="#" class="png_bg">链接</a>

    解决办法:我使用的是最原始的办法——filter。需要注意background的先后顺序以及第二个background和filter之前的下划线,都是必须的。例:
    <style>
    a{background:url(xxx.png) no-repeat 0 0;}
    a:hover{background:url(xxx_hover.png) no-repeat 0 0; _background:none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="xxx.png" ,sizingMethod="crop");}
    </style>
    <a href="#" class="png_bg">链接</a>

以上是我个人遇到的一些问题和解决办法,也欢迎大家来补充和指正哈~