png在IE6下去除显示阴影的解决办法
png在IE6下的解决办法
默认分类 2010-08-23 23:58:12 阅读50 评论0 字号：大 中 小 订阅
【转自：http://blog.csdn.net/newflypig/archive/2008/12/10/3492895.aspx 】
在做WEB设计时最让人头痛的就是不同浏览器之间的显示差异，这一点尤其以IE6最让人深恶痛绝。最近就碰到一个非常让人头痛的问题，PNG在IE6下的透明效果失效。研究了差不多三天，终于不完美解决了这个问题。
W3C标准推荐使用PNG图片作为网页首选图像资源，但是漂亮、和谐而且有透明效果的PNG却在IE6下显示得一塌糊涂。为了解决这个问题查阅了很多资料，核心原理是使用IE独有的CSS样式中的behaviro属性，最终用如下方法解决：
1.下载iepngfix.zip，其中有三个文件：iepngfix.htc、iepngfix_tilebg.js、blank.gif，将这几个文件解压出来放到所需要使用png做为CSS背景的网站的根目录下。
2.假定一个div需使用png作为背景，标准的做法是：
#mydiv {
background:url(../img/main.png) no-repeat;
width:739px;
height:366px;
top:12%;
left:20%;
position:absolute;
}
此时该背景能在FF和IE7下正常显示，但是在IE6下会有恐怖的“灰边”。需要使用滤镜来解决。具体做法是使用上面提到的htc文件，在CSS样式的最后定义一个behaviro属性。新的的样式定义为：
#login_main {
background:url(../img/main.png) no-repeat;
width:739px;
height:366px;
top:12%;
left:20%;
position:absolute;
behavior: url("iepngfix.htc");
}
此时要注意url内的路径是相对于index.htm来说的，而不是相对于定义其样式的css文件。
3.在index.htm文件中需要引入上文中提到的第二个javascript文件，使用
插入到
中
此时大功告成，使用IE6浏览index.htm文件看看效果，得意的笑吧。顺便提醒一句，对于普通IE6升级成IE7的XP用户，这两种浏览器是无法在同一个操作系统中共存的，笔者比较愚笨，使用了SUN的virtual box装了一个WIN2K3，幸好virtual box提供全屏和无缝模式，使得虚拟机用起来还是蛮流畅的。
优化：
方案一：可以发现，当需要用到的png图片比较多时IE6反应会有些迟钝，因为IE6每次加载需要透明的PNG时都会进行一系列的运算，将png中的alpha透明部分用blank.gif空白位图代替，可以想象这样的计算规模有多庞大。没办法，这是无法避免的，Vista 和IE7早就出来了，还有非常卓越的FF可供选择，使用IE6的客户所占的份额总会渐渐下降的。观察一下，此时使用IE7打开刚刚index.htm可以发现，本来非常完美而且不需要做任何改动的页面在IE7下也加载得特别慢，看来behaviro属性也影响到了IE7，让IE7也做了繁重的无用功。
此时我们的目标是将IE7解放出来，查阅各种浏览器的hack，发现只有IE6在CSS中能够认识下划线“_”，所以我们在刚刚的CSS样式中的 behaviro前加上一个下划线。而这个下划线无论是FF或者IE7都是不会去解析的，这样IE7就会忽略这个CSS属性，既而解放了IE7。
方案二：既然此次处理的目标就是IE6浏览器，所以在首页中的JS加载语句也可以加上一个小小的改动，加上“”标签，既而只针对IE6，而解放了其他浏览器，使它们在页面加载时就忽略 iepngfix_tilebg.js这个文件，提高效率。而可怜的IE6，让它接受暴风骤雨般的CPU消耗吧，没办法，爱莫能助了。
----------------------------------------------------------------------------------------------------------------------------------------------
【转自：http://blog.csdn.net/dr592112441/archive/2009/12/23/5056602.aspx 】
实例：解决IE6下png透明失效的问题。
/*
兼容IE6.0、IE7.0、IE8.0、FF
IE7.0和新版的FF其实是可以不加filter滤镜直接透明的。
*/
CSS样式:
.png{
_background: url(http://www.webgo.cn/images/lg_gm2.png ) no-repeat !important;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=noscale, src="http://www.webgo.cn/images/lg_gm2.png ");
background:none;
width:211px;height:55px;
}
.png div{position:relative;}
HTML代码：
-----------------------------------------------------------------------------------------------------------------------------------------------------
【转自：http://blog.csdn.net/boral_li/archive/2009/05/04/4144365.aspx 】
PNG(Portable Network Graphics)格式图片可以表现更为绚丽多彩的颜色，常见的一些具有矢量效果的图片、图标都采用png格式，但是具有透明背景的png格式图片在 IE6中却不是背景透明的，透明背景部分会显示出#DBEAED的淡灰色，表现效果很糟糕，为了使用透明背景图片只有采用gif格式了，但是gif格式会出现明显的锯齿效果，所以只有设法修复IE6的这个问题。解决的办法就是使用IE的Microsoft.AlphaImageLoader滤镜。
方法一：
IE6与原本支持png8的索引色透明度，但不支持png或8位以上的 alpha 透明度。对于非动画的GIF可以使用PNG8，同时体积也会更小。但这种办法是以牺牲图片质量为代价的，而且实施也不太容易！
--------------------------------------------------------------------------------
方法二：
如果希望使用png格式图片作为DOM元素的背景，那么就可以使用滤镜来加载png图片
.png{ background: url(/angel.png) no-repeat !important; _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/images/angel.png"); background:none; width:100px; height:100px;}HTML代码： 方法三： 如果png格式的图片不是用来做元素背景，而是直接引入的img图像，那么方法二就无法应用了，那么此时可以把此img标签的src属性替换为一张空的透明gif图像，然后再按照方法二把png图片加载为元素的背景就可以了。首先要准备一张空白透明的gif图片，一般命名为blank.gif或 space.gif或transparent.gif，然后就可以替换png图像了。但是手工替换不太现实，最好一段代码就解决问题：
以上代码使用了一些IE的Hack，IE7，IE8，Firefox直接应用_background，IE6则会应用filter！
把图片换成你自己的图片
