本文将介绍如何在IE6下让整站的PNG透明,以及如何使PNG透明的情况下背景重复平铺 即让repeat属性生效,以及解决内部元素链接失效的问题.

PS:目前还不能解决定位的问题.即还不能让background-position生效

作为浏览器市场的老大，IE6的罪恶罄竹难书，不支持透明PNG这一“特性”让IE6成为常用浏览器中唯一的异类。IE特有的CSS滤镜虽然可以做到这一点，但是代码比较复杂，只能对单个图片使用或者只能对img标签生效,而且使用了该滤镜所属标签下的链接失效,背景不能重复平铺。在这里和大家分享一个能让IE6接近完美支持透明PNG图片的“傻瓜式”脚本，为什么是接近完美? 因为追求完美本身就是不完美:)

IE PNG Fix v1.0 / 2.0 Alpha 2

  • 来源：http://www.twinhelix.com/css/iepngfix/
  • 预览：http://www.twinhelix.com/css/iepngfix/demo/
  • 下载：http://www.twinhelix.com/css/iepngfix/iepngfix.zip
  • 效果：允许IE6正常显示使用IMG标签插入或以CSS 背景图片方式写入的透明PNG图象。

使用方法：

  1. 下载iepngfix.zip，将其中的iepngfix.htc和blank.gif解压缩到合适的目录内，.htc即Html Components，该文件需要在CSS中被调用；blank.gif是一个1×1像素的透明GIF图片，缺少该文件会使标签插入的PNG图象显示为红色的叉烧包。

  2. 在iepngfix.htc中修改blank.gif的路径，var blankImg =‘blank.gif的正确路径’，这是惟一一个需要修改的配置。
    if (typeof blankImg == ‘undefined’) var blankImg = ‘blank.gif’;
  3. 在css中将需要使用透明PNG的元素与.htc文件关联。
    例如：*{behavior: url(iepngfix.htc) }
    轻松三步，IE6就能支持透明PNG图片了。

进阶使用：

1、behavior是IE特有的属性，直接写入样式表将导致页面无法通过W3C的css验证。使用以下方法可以解决这个问题，同时利用IE的条件注释使脚本只应用于IE6及以下版本，消除对IE7,FF用户的影响。
将以下代码单独保存为ie6.css (因为IE6的hacks大部分不能通过W3C校验,所以最好将所以IE6的 hacks都写到这个文件里)
*{behavior: url(iepngfix.htc)}
然后在HTML页里插入
<!--[IF IE 6]>
<link href="ie6.css" rel="stylesheet" type="text/css" media="all" />
<![ENDIF]-->
注意:这段代码应该放在主样式表之后.

2、在css中使用通配符“*”调用.htc脚本会对body内所有标签进行处理，加大客户端的资源消耗，延缓页面载入时间。我们可以细化CSS选择器针对某一个标签甚至是某个ID的元素来套用脚本以获得更好的用户体验。
例如：
img,div{behavior: url(iepngfix.htc) }
div#header{behavior: url(iepngfix.htc)}
如果无法预见页面中哪些地方需要这个滤镜，还可以将behavior写入成class以便调用。
.pngsupport{behavior: url(iepngfix.htc)}
这样做的缺点是如果有大量的PNG图片HTML文件中会出现大量的class=”pngsupport” 类, 因此这个方法适合整站中PNG图片应用较少的情况.

一点点缺陷

在文章开头我就说过这个方法是不完美的，一起来看看iepngfix.htc都有哪些不足吧。

1、作为背景的PNG图象无法被定位，即background-position失效。

2、在页面刚载入的时候我们依旧能看到PNG图象因为IE6不支持而短暂出现的灰边，时间取决页面文件的大小和网络速度。

3、img标签的插入的透明PNG图象无法使用右键保存，“另存为”只能取到覆盖在上面的blank.gif。什么？不要blank.gif？等着吃叉烧包吧。其实这一条从某种意义上应该算是优点,比如当你不想让别人另存你的图片的时候,这就是一种很好的方法喔!因为前面已经说过了 保存到的只能是blank.gif -__-,

相对于IEPNGFIX.HTC的强大优点 这些缺点除了第一条算是不足之外 后两条就不算什么缺点啦!

本站原创文章,欢迎转载 转载请注明出处: Clover’s blog http://yiyifly.com/blog
本文地址 http://yiyifly.com/blog/archives/79