iepngfix.htc让PNG-24在IE6中透明的方法(转)

add:360用的一个方法:

<!--[if IE 6]>

<script src="http://se.360.cn/js/DD_belatedPNG.js"></script>

<script>DD_belatedPNG.fix(‘.logo, .sprite, .nav a‘);</script>

<![endif]-->

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

如果纯以平面设计的思想来设计,那是相当愉快的事情,设计师可以全身心的放在设计本身上。但各浏览器对同一代码的区别对待,让我们在页面的可实现性上,绞尽脑汁,筋疲力尽。特别是IE6这个到处撒野的坏孩子。

无意间看到一个不错的方法使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页面文件中部分加入

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

时间: 2024-10-12 03:00:29

iepngfix.htc让PNG-24在IE6中透明的方法(转)的相关文章

利用Js或Css滤镜实现IE6中PNG图片半透明效果 IE6PNG妥妥的

接下来介绍几种PNG图片在IE6中不透明的解决办法 1.用自己的PNG,让IE6一边去吧 首先制作PNG图片的时候,另存为一个GIF图片,因为IE6是支持GIF图片透明,然后在css定义 .pngtest{ background:url(mark.png); _background:url(mark.gif);} 优点:方便.快捷,使用超简单 缺点:对于PNG图片只是某些局域透明,该方法比较奏效,但图片要是半透明的话,这种方法就实现不了 该方法延伸的另外一种解决办法:用PS或者其他图片编辑工具把

IE6中浮动的问题

代码如下: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style> 5 div { 6 width: 100px; 7 height: 100px; 8 } 9 .one { 10 float: left; 11 background: red; 12 } 13 .two { 14 background: green; 15 width: 150px; 16 } 17 </style> 18 <title

关于IE6中做兼容的那点事。

前言 对于程序员来说,一听到你做的程序必须兼容IE6(当然主流浏览器肯定得兼容的),那颗滚烫的心瞬间哇凉哇凉的,但是有时,项目就要求这样,你也只能硬着头皮跟IE6来个亲密接触,最近正好做了个项目,关于兼容IE6,真是废了点功夫,特此记录一下,方便以后查阅,也方便以后园友遇到同样问题可以参考一下. 正文 I.png透明图片不支持透明. 简介:项目中运用一部分png图片,在IE7以上,火狐,谷歌均是正常显示,但在IE6中,PNG图片背景出现差异,有时纯黑,有时纯白,有时纯灰等等,而不是透明,经过一番

[ 打败 IE 的葵花宝典 ] IE6中css常见BUG全集及解决方案

IE6双倍边距bug 当页面内有多个连续浮动时,如本页的图标列表是采用左浮动,此时设置li的左侧margin值时,在最左侧呈现双倍情况.如外边距设置为10px, 而左侧则呈现出20px,解决它的方法是在浮动元素上加上display:inline;的样式,这样就可避免双倍边距bug. 3像素问题及解决办法 当使用float浮动容器后,在IE6下会产生3px的空隙,有意思的是右侧容器没设置高度时3px在右侧容器内部,当设定高度后又跑到容器的左侧了,所以对布局精度要求高的话,请参考例29.31的解决方

div在IE6中固定

在IE6中固定一div在右下角,但是ie6不支持position:fixed属性,那么只能通过js实现,通过js判断浏览器在ie6的情况下,div的position为absoluate:right:0:bottom:0:indexOf() 方法对大小写敏感,如果要检索的字符串值没有出现,则该方法返回 -1. <!doctype html> <html> <head> <meta charset="utf-8"> <meta name

仅IE6中链接A的href为javascript协议时不能在当前页面跳转

切页面时有时用链接A来替代按钮,这样做有几个好处 鼠标放上时默认有手状效果(不用添加cursor:pointer) 可以添加低版本IE都支持的伪类 如果点击时页面要整体刷新,即跳转,这时IE6则不尽人意,如下 ? 1 2 3 4 5 6 7 8 9 10 <p><a href="javascript:;" onclick="jumpSina()">Sina</a></p> <p><a href=&qu

ie6中DIV最小高度的解决方法

ie6中DIV最小高度的解决方法 IE6中,使用CSS定义DIV的高度的时候经常遇到这个问题,就是当DIV的最小高度小于一定的值以后,就会发现,无论你怎么设置最小高度,Div的高度会固定在一个值不再发生变动,这个问题很是烦人.如下面的情况. HTML代码<html> <head> <title></title> <style type="text/css"> <!-- #testdiv { background: #00

解决PNG图片在IE6中背景不透明的问题

1.解决PNG图片在IE6中背景不透明的CSS与JS代码   -   TOP JS代码  function correctPNG() // correctly handle PNG transparency in Win IE 5.5 & 6. { var arVersion = navigator.appVersion.split("MSIE") var version = parseFloat(arVersion[1]) if ((version >= 5.5) &a

IE6中让png的icon图标也透明的完整代码段

一个引用了在IE6中让img图标也可引用png图片的js插件代码的html是这样写的,兼容IE6: <a class="btn btn-select" href="javascript:fensong_addaccept()">                        <img src="__STATIC__/yjj/images/16.png" width="16" height="16&q