2013年4月26日

让IE6支持PNG透明


PNG的透明效果真的很棒,但往往在设计网页时,为了尽量少用IE6的hack,不惜丢弃一些很好的创意,不知不觉中禁锢了自己的思想。

如果纯以平面设计的思想来设计,那是相当愉快的事情,设计师可以全身心的放在设计本身上。但各浏览器对同一代码的区别对待,让我们在页面的可实现性上,绞尽脑汁,筋疲力尽。无意间看到一个不错的方法使IE6支持PNG-24的透明效果,尝试过后,发觉还是挺简单的。

首先从 http://www.twinhelix.com/css/iepngfix/ 下载  iepngfix.zip(直接点击下载,如果链接还有效的话),解压后里面有个实例效果可以看看。想测试IE6的话,用IETESTER貌似不管用,我用的虚拟机中XP的IE6。

其中有3重要的文件:
1.   blank.gif  (此文件貌似是解决用IMG标签插入PNG图像时产生的1像素偏移的bug。)
2.   iepngfix.htc    (这个文件是让IE6支持PNG-24透明的关键)
3.   iepngfix_tilebg.js   (此脚本是用来解决用PNG作为背景时,不能用Position定位和repeat的问题。)

使用方法:  

一、将blank.gif 、iepngfix.htc、iepngfix_tilebg.js分别拷贝进你想要的文件夹内,以我的为例:images/blank.gif  、js/iepngfix.htc  、js/iepngfix_tilebg.js  。

二、然后,这里需要更改唯一个需要配置的文件,用记事本或其他软件打开iepngfix.htc,找到 IEPNGFix.blankImg = thisFolder + ‘blank.gif’; 这句代码,并修改blank.gif图片地址,以我的为例:
IEPNGFix.blankImg = ‘images/blank.gif’;

(注意:图片地址是以需要调用这个文件的html文档所在的位置作为根目录的,所以不应该写成IEPNGFix.blankImg = ’../images/blank.gif’;
如果需要这样写,请把前面的thisFolder + 加上,就变成它的相对路径了。)

三、在需要hack的html页面文件中<head></head>部分加入   <script src=”js/iepngfix_tilebg.js” type=”text/javascript” ></script>

四、至此,你就可以在你的css文件中添加全局属性 * {behavior: url(“js/iepngfix.htc”);} (注意:htc文件路径同样是以html文档的位置为根目录),不过这样写总让人感觉会增加服务器负荷及响应时间。
建议指定元素拥有该属性,如:
div,input,img {behavior: url(“styles/iepngfix.htc”);}

如果需要使用hack的元素不多,建议直接单独写在该元素的css样式内,如:
#header { width:960px; height:50px; background:url(images/bg.png) no-repeat 0 0; behavior: url(“styles/iepngfix.htc”);}

优化:为了使hack有针对性的调用,应该为IE6单独写一份CSS文件,并在html文档head部分用判断语句来选择性调用ie6的CSS及js文件,如:
<!–[if lte IE 6]>
<link href=”styles/ie6.css” type=”text/css” rel=”stylesheet” />
<script type=”text/javascript” src=”js/iepngfix_tilebg.js”></script>
<![endif]–>
不过我还习惯性把behavior属性改成_behavior,虽然看起来有点多余^ ^   至此,我们终于可以长舒一口气了。

 注:试验多次,发现input标签背景无法定位和repeat。

新的问题出现:   我在用wordpress3.1.2做主题模板的时候发现,CSS behavior属性只能写在php模板文件里,因为CSS文件中不能写php的模板路径函数,在if判断语句中加入:
<!–[if lte IE 6]>
<link href=”<?php bloginfo(‘template_url’);?>/styles/ie6.css” type=”text/css” rel=”stylesheet” />
<script type=”text/javascript” src=”<?php bloginfo(‘template_url’);?>/js/iepngfix_tilebg.js”></script>
<style type=”text/css”> * { _behavior : url ( <?php bloginfo(‘template_url’);?>/js/iepngfix.htc) ; } </style>
<![endif]–>
制作wordpress主题模板的时候,css选择器不能使用 div,最好通过ID或类名来选择该div,否则iepngfix不起作用,什么都看不到。不知道是我的个案还是其他什么原因,目前除了input标签背景无法定位和repeat,其他标签暂时没有发现问题。

标签:,

微信扫一扫二维码访问