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文件。

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

  1. 【IE6的疯狂之二】IE6中PNG Alpha透明(全集)

    ie7,fireofx,opera,及至webkit内核的chrome ,safari….. 这些浏览器均支持png的Alpha透明. 很多人说IE6不支持PNG透明,其实IE支持100%透明的PNG ...

  2. 解决IE6中 PNG图片透明的终极方案-八种方案!

    “珍惜生命,远离IE6”,IE6中的bug令很多Web前端开发人员实为头疼,因此不知道烧了多少脑细胞,在众多的Bug中最令人抓狂的就是IE对png图片的不支持,导致设计师和重构师放弃了很多很炫的效果, ...

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

    接下来介绍几种PNG图片在IE6中不透明的解决办法 1.用自己的PNG,让IE6一边去吧 首先制作PNG图片的时候,另存为一个GIF图片,因为IE6是支持GIF图片透明,然后在css定义 .pngte ...

  4. IE6中 PNG 背景透明的最佳解决方案

    为什么要使用 PNG 图片? 简 单来说,使用 PNG 格式比起 GIF 来表现色彩更丰富,特别是表现渐变以及背景透明的渐变要比GIF格式出色很多.目前,最新的浏览器基本上都支持PNG格式.唯独有万恶 ...

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

    前言 对于程序员来说,一听到你做的程序必须兼容IE6(当然主流浏览器肯定得兼容的),那颗滚烫的心瞬间哇凉哇凉的,但是有时,项目就要求这样,你也只能硬着头皮跟IE6来个亲密接触,最近正好做了个项目,关于 ...

  6. [转] IE6中请求莫名中断

    这两天碰到的问题,IE6下某个js生成的a节点,设置了href="javascript:;",点击时触一个ajax请求,但在IE6下就是无法执行succese里的内容,所以就用se ...

  7. jquery博客收集的IE6中CSS常见BUG全集及解决方案

    今天的样式调的纠结,一会这边一会那么把jquery博客折腾的头大,浏览器兼容性.晚上闲着收集一些常见IE6中的BUG 3像素问题及解决办法 当使用float浮动容器后,在IE6下会产生3px的空隙,有 ...

  8. 那些盒模型在IE6中的BUG们,工程狮的你可曾遇到过?

    HTML5学堂 那些盒模型在IE6中的BUG们,工程狮的你可曾遇到过? IE6已经渐渐的开始退出浏览器的历史舞台.虽然当年IE6作为微软的一款利器击败网景,但之后也因为版本的持续不更新而被火狐和谷歌三 ...

  9. IE6中布局常见问题

    1.众所周知,每个IE的版本都有两种模式,怪异模式(混杂模式)和标准模式.下图附上针对IE的hack. 2.另外有一种引进css的方法,也可以作为调整网站hack的方法:<!—[if IE 6] ...

随机推荐

  1. CentOS 6安装mock

    最近工作中需要用到mock,这里介绍两种安装方式.本文的环境为CentOS 6.4 x86_64. 一,使用yum安装mock 安装第三方yum源RPMForge Centos5 64位 wget h ...

  2. mysql同步 小问题

    由于历史遗留问题,我们的MySQL主从库的表结构不一致,主库的某个表tableA比从库表tableA少了一个字段. 当尝试在主库上更改表结构时,这行alter语句会随着binlog同步到从库,如果从库 ...

  3. C#读写文件总结

    1.使用FileStream读写文件   文件头:   using System; using System.Collections.Generic; using System.Text; using ...

  4. hdu 1541 Stars(树状数组)

    题意:求坐标0到x间的点的个数 思路:树状数组,主要是转化,根据题意的输入顺序,保证了等级的升序,可以直接求出和即当前等级的点的个数,然后在把这个点加入即可. 注意:树状数组下标从1开始(下标为0的话 ...

  5. selenium python (三)鼠标事件

    # -*- coding: utf-8 -*-#鼠标事件 #ActionChains类中包括:                     # context_click()  右击:           ...

  6. [转]linux 如何改变文件属性与权限

    转自:http://www.cnblogs.com/yangjinjin/p/3165076.html 我们知道档案权限对于一个系统的安全重要性,也知道档案的权限对于使用者与群组的相关性, 那如何修改 ...

  7. collect my database for test KCF tracker tools

    Path Button used to set dir where avi file saves, set path set video size and start record write to ...

  8. 《VC++ 6简明教程》即VC++ 6.0入门精讲 学习进度及笔记

    VC++6.0入门→精讲 2013.06.09,目前,每一章的“自测题”和“小结”三个板块还没有看(备注:第一章的“实验”已经看完). 2013.06.16 第三章的“实验”.“自测题”.“小结”和“ ...

  9. git 换行符问题

    git 换行符问题 在windows环境中 对于autocrlf = false 不会激发 关于换行符的处理 对于autocrlf = true 会在提交是将LF替换成CRLF 切出时时CRLF 对于 ...

  10. DOM笔记(六):怎么进行JQuery扩展?

    一.全局函数的扩展 全局函数是将独立的函数添加到JQuery的命名空间中区.在使用的时候,可以通过$.fucnName(param)或者jQuery.funcName(param)方式进行调用. 1. ...