解决ie6不支持png图片问题

首先说一下如何切图：

1.色彩丰富，大的切成jpg

2.尺寸小的，色彩不丰富的和背景透明的切成gif或png8

3.半透明的切成png8并用js实现其半透明

方法一：

background:url(../images/x.png) no-repeat left top;
_background-image: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/x.png');

此方法可让IE6支持png24，效果甚佳屡试不爽，但是
1、图片只能用背景图显示
2、不能同时对该元素进行定位

如果需要用这方法又要定位，那也还是有办法的，就是在此元素外加个包围元素，给它定位即可(不能给它定位，没说不能给它老爸定位哈)

方法二：

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

blank.gif(此文件貌似是解决用IMG标签插入PNG图像时产生的1像素偏移的bug。)
iepngfix.htc    (这个文件是让IE6支持PNG-24透明的关键)
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文件，如：
1
2
3
4 
不过我还习惯性把behavior属性改成_behavior，虽然看起来有点多余^ ^
至此，我们终于可以长舒一口气了。
注：试验多次，发现input标签背景无法定位和repeat。
新的问题出现：
我在用wordpress3.1.2做主题模板的时候发现，CSS behavior属性只能写在php模板文件里，因为CSS文件中不能写php的模板路径函数，在if判断语句中加入：
1
2
3
4
5 
制作wordpress主题模板的时候，css选择器不能使用div，最好通过ID或类名来选择该div，否则iepngfix不起作用，什么都看不到。不知道是我的个案还是其他什么原因，目前除了input标签背景无法定位和repeat，其他标签暂时没有发现问题。

方法三：

用JS在IE6下面实现png图和背景PNG透明。

不敢独享，写下这篇文章，也好为自己以后查阅，利人利己啊。

并且，可以解决a:hover 背景png的问题。下面开始，三步即可搞定IE6下PNG透明问题。

第一步：下载JS文件DD_belatedPNG_0.0.8a.js

下载地址：http://dillerdesign.com/experiment/DD_belatedPNG/DD_belatedPNG_0.0.8a.js
或：http://dillerdesign.com/experiment/DD_belatedPNG/DD_belatedPNG_0.0.8a-min.js

第二步：引用JS文件

<!--[if IE 6]>

/* string argument can be any CSS selector */
/* .png_bg example is unnecessary */
/* change it to what suits you! */
</script>

<![endif]-->

PS:灰色文字部分【'.enter,.enter a,.enter a:hover'】，为div选择器的名称，大家看后面的html代码即可明白

第三步：网页body部分

.enter { width:193px; height:43px; position:absolute; bottom:15px; left:60%; z-index:100; color:#FFF}

.enter a{ width:193px; height:43px; display:block; background:url(enter.png) no-repeat;}

.enter a:hover{width:193px; height:43px; display:block; background:url(enter.png) 0px -43px;}

</style>

解决ie6不支持png图片问题

相关推荐