png在IE6下去除显示阴影的解决办法
来源：互联网 发布：手机网络位置需要权限 编辑：程序博客网 时间：2024/05/17 22:45
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文件，使用
<script language="javascript" src="iepngfix_tilebg.js"></script>
插入到<head></head>中
此时大功告成，使用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加载语句也可以加上一个小小的改动，加上“<!--[if IE 6]><![endif]-->”标签，既而只针对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代码：
<div class="png">
<div>
-----------------------------------------------------------------------------------------------------------------------------------------------------
【转自：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代码：<div class="png"> 背景PNG透明<div>--------------------------------------------------------------------------------
以上代码使用了一些IE的Hack，IE7，IE8，Firefox直接应用_background，IE6则会应用filter！
方法三：
如果png格式的图片不是用来做元素背景，而是直接引入的img图像，那么方法二就无法应用了，那么此时可以把此img标签的src属性替换为一张空的透明gif图像，然后再按照方法二把png图片加载为元素的背景就可以了。首先要准备一张空白透明的gif图片，一般命名为blank.gif或 space.gif或transparent.gif，然后就可以替换png图像了。但是手工替换不太现实，最好一段代码就解决问题：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>替换pngtitle>
<style type="text/css">
.mypng img {
azimuth: expression(
this.pngSet?this.pngSet=true:
(this.nodeName == "IMG" &&
this.src.toLowerCase().indexOf('.png')>-1?
(this.runtimeStyle.backgroundImage = "none",
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
this.src = "transparent.gif")
:(this.origBg = this.origBg?
this.origBg
:this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
this.runtimeStyle.backgroundImage = "none")),
this.pngSet=true);
}
style>
head>
<body>
换成你的png图片
<div class="mypng">
<img src="icon_face_07.png" width="30" height="30" />
<img src="icon_face_10.png" width="30" height="30" />
<img src="icon_face_08.png" width="30" height="30" />
<div>
<body>
<html>--------------------------------------------------------------------------------
以上代码使用了仅IE支持的CSS表达式完成替换与设置滤镜背景的工作。
同样的工作也可以由Javascript来完成：
--------------------------------------------------------------------------------
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>自动替换png图片</title>
<script language="JavaScript">
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) && (document.body.filters)) {
for(var j=0; j<document.images.length; j++) {
var img = document.images[j]
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length-3, imgName.length) == "PNG"){
var imgID = (img.id) ? "id='" + img.id + "' " : ""
var imgClass = (img.className) ? "class='" + img.className + "' " : ""
var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
var imgStyle = "display:inline-block;" + img.style.cssText
if (img.align == "left") imgStyle = "float:left;" + imgStyle
if (img.align == "right") imgStyle = "float:right;" + imgStyle
if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
var strNewHTML = "<span " + imgID + imgClass + imgTitle
+ " style=/"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
+ "(src=/'" + img.src + "/', sizingMethod='scale');/"></span>"
img.outerHTML = strNewHTML;
j = j-1;
}
}
}
}
if(window.attachEvent)
window.attachEvent("onload", correctPNG);
</script>
<style type="text/css">
<!--
body {
background-color: #9999CC;
}
-->
</style></head>
<body>
把图片换成你自己的图片
<img src="img/icon_face_03.png" width="30" height="30" /><!--把图片换成你自己的图片 -->
<img src="img/icon_face_05.png" width="30" height="30" />
<img src="img/menu_title_over.png" width="130" height="36" />
</body>
</html> --------------------------------------------------------------------------------
以上代码采用Javascript遍历页面中的png图像，并实现替换功能！
方法四：
在页面上注入Javascript代码并执行还是不太方便，因此可以把这些Javascript代码封装为htc，并设定浏览器的缺省行为即可实现同样的功能，常用的htc即iepngfix.htc
–[if lte IE 6]>
<style type="text/css">
img{behavior: url(iepngfix.htc)}
style>
[endif]–>
以上代码就使用IE的缺省行为behavior属性导入了png图像处理代码iepngfix.htc，不过要修改iepngfix.htc中blank.gif的路径，使其指向正确的空白透明图片！
下载iepngfix.htchttp://www.twinhelix.com/css/iepngfix/iepngfix.zip
iepngfix的缺陷：
1、使用PNG透明背景可能导致该元素内部链接无法点击，尤其在链接具有float属性的时候，如：存在于一个浮动列表中的链接。推荐解决方法：使用display:inline代替float来实现块级元素的的横向排列。
2、img标签的插入的透明PNG图象无法使用右键保存，“另存为”只能取到覆盖在上面的blank.gif，因为原始图片已经被替换为空白图片了！
3、作为背景的PNG图象无法被平铺，无法被定位，即background-repeat默认为no-repeat，而background-position彻底失效。
面对这样的bug，只希望IE6早日走进坟墓成为历史！
- png在IE6下去除显示阴影的解决办法
- png在IE6下的解决办法
- png在IE6下的解决办法
- png在ie6下的显示问题
- 2011-08-31[ie6中png显示不正常的解决办法]
- ie6下png阴影问题的解决方案
- PNG图片在IE6不会透明的解决办法
- PNG图片在IE6的显示问题の解决
- png格式的图片在IE6透明显示
- .png在IE6中显示的效果处理
- 关于IE6不支持PNG图片的解决办法
- 关于IE6不支持PNG图片的解决办法
- IE6中png背景图片不透明的解决办法
- ie6里png图片不透明的解决办法
- 解决IE6透明显示PNG的办法
- IE6下显示透明的PNG图片
- 让IE6显示阴影
- ie6下使网页png图片不透明显示解决办法
- 代码make后出现的错误----为什么会出现这个错误，怎么改？
- 鼠标光标错位的修正
- scrollview--android
- OBJ文件格式分析工具: objdump, nm,ar
- SVN增加文件后，文件无法自动包括在项目中的原因
- png在IE6下去除显示阴影的解决办法
- Modbus的Crc校验有几种 常用的有16位CRC和32位CRC
- objdump选项解释
- lfs下selinux用户空间程序的安装
- 收藏微软面试智力题 (附答案)
- Linux下安装gcc交叉编译工具
- Hibernate中常用的主键生成策略
- reinterpret_cast的本质
- MySQL 部分操作
