【标 题】：解决IE浏览器不能正确识别PNG透明度的问题
【关键字】：IE,PNG

解决IE浏览器不能正确识别PNG透明度的问题

--------------------
今天做WEB，切图的时候，因为有透明度图片。开始是在FIREFOX里调试的，正常～
后来，用IE打开后，乖乖变样子了！丑死了～～～
后来写了个JS专门修正IE的问题～
复制内容到剪贴板
代码:
function correctPNG()
   {
   for(var i=0; i<document.images.length; i++)
      {
      var img = document.images[i]
      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
         i = i-1
         }
      }
   }
window.attachEvent("onload", correctPNG);
然后，在HEAD里加入
<script type="text/javascript" src="http://www.bokemx.com/js/pngfix.js"></script>
就OK了！！
备注：IE浏览器如果屏蔽了JS脚本，就可能不起作用了。。要允许JS允许才可以


IE下透明PNG图片的显示

PNG(Portable Network Graphics)是W3C推荐的网页图片通用格式，但是Microsoft的IE6以下(IE7已经支持)没有把PNG的Alpha 通道打开，造成透明PNG图片的效果出不来。在Firefox、Opera下显示正常的透明PNG图片，在IE下浏览时就会带有灰色背景色，很难看.
解决方法之一是给透明PNG图片加一个滤镜：
复制内容到剪贴板
代码:
[<div style="width:100%;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='透明PNG图片路径',sizingMethod='image')></div>
或是用CSS的方式控制，把style写在CSS文件中，就不用每贴一张图都要写这么长的代码了。

PS：因为IE5.0以下不支持AlphaImageLoader滤镜，所以IE5.0以下就不能显示透明PNG效果了，不过现在还用IE5.0以下的恐怕是没人了吧。
引用:
关于AlphaImageLoader滤镜

语法：
filter: progid: DXImageTransform.Microsoft.AlphaImageLoader( enabled=bEnabled, sizingMethod=sSize, src="http://www.bokemx.com/sURL")
属性：
enabled : 可选项。布尔值(Boolean)。设置或检索滤镜是否激活。true | false
　　　　　　true : 默认值。滤镜激活。
　　　　　　false : 滤镜被禁止。

sizingMethod : 可选项。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。
              crop : 剪切图片以适应对象尺寸。
              image : 默认值。增大或减小对象的尺寸边界以适应图片的尺寸。
              scale : 缩放图片以适应对象的尺寸边界。
              src : 必选项。字符串(String)。使用绝对或相对 url 地址指定背景图像。假如忽略此参数，滤镜将不会作用。

说明：
在对象容器边界内，在对象的背景和内容之间显示一张图片，并提供对此图片的剪切和改变尺寸的操作。如果载入的是PNG(Portable Network Graphics)格式，则0%-100%的透明度也被提供。
PNG(Portable Network Graphics)格式的图片的透明度不妨碍你选择文本。也就是说，你可以选择显示在PNG(Portable Network Graphics)格式的图片完全透明区域后面的内容。

PNG背景IE显示问题为什么PNG图片却没有GIF和JPG图片的使用来得广泛呢，这个祸因应归属于微软的IE浏览器（Firefox和Opera对PNG支持的比较好，而现在浏览器的主流IE6却无法很好的支持）。不过微软在最近也开始改过自新了，新出的的IE7可以很好的支持PNG，可以想象在未来的网络世界，PNG图片的重要性将会更加凸显。
但在大家还在绝大多数的使用IE6的时候，我们又怎样在IE6的世界去完美使用PNG图片呢。我们应该庆幸我们是幸福的！IE5.5+的AlphaImageLoader滤镜为通向png提供了一个道路，如果他载入的是PNG(Portable Network Graphics)格式，则0%-100%的透明度也被提供。但IE5.0无法支持属性，那只有完全绝望了，不过绝望的只是几个，得到是绝大数，我们应该知足，知足才会常乐。
现在我们将通过Hack和AlphaImageLoader滤镜来处理IE6下的PNG背景问题。
先熟悉下滤镜的语法：

复制内容到剪贴板
代码:
Quote:filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src="http://www.bokemx.com/sURL" )
属性：
enabled : 可选项。布尔值(Boolean)。设置或检索滤镜是否激活。true | false
true : 默认值。滤镜激活。
false : 滤镜被禁止。
sizingMethod : 可选项。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。
crop : 剪切图片以适应对象尺寸。
image : 默认值。增大或减小对象的尺寸边界以适应图片的尺寸。
scale : 缩放图片以适应对象的尺寸边界。
src : 必选项。字符串(String)。使用绝对或相对 url 地址指定背景图像。假如忽略此参数，滤镜将不会作用。 Firefox、Opera等完全支持PNG透明图片的浏览器也支持子选择器（>），而IE不识别（包括IE7），所有我们可以通过这来定义Firefox、Opera等浏览器中PNG图片的样式。

如下
复制内容到剪贴板
代码:
html>body #png {background: url(http://www.bokemx.com/images/bg.png) repeat;}

而对于IE，我们都通过滤镜的方法来定义，或许有人问，IE7不是支持PNG透明图片吗？是的，不错，IE7是支持PNG透明图片，但IE7也支持AlphaImageLoader滤镜，为了避免使用PNG图片和滤镜冲突造成的不便，我们统一在IE中使用AlphaImageLoader滤镜。我们通过只有IE才识别的通配符（*），来定义IE浏览器中的滤镜。

如下：
复制内容到剪贴板
代码:
* html #png {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="http://www.bokemx.com/images/bg.png");
background:none;
}[code]

这样综合起来的决绝方法就是：
[code]
html>body #png {background: url(http://www.bokemx.com/images/bg.png) repeat;}
html #png {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="http://www.bokemx.com/images/bg.png");
background:none;
}[code]
不过需要注意的一个地方：
使用AlphaImageLoader 后该区域的超链接和按钮会失效，解决的方法：
对链接或按钮直接设置相对位置，让它们浮动于滤镜区域的上面。
[code]
<1style type="text/css" media="screen">
body {
      background-color:#009999;
color:#fff;
font-size:12px;
}
*html div.ie {
      filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=../***.png);
width:200px;
height:150px
}
html>body div.ie {
background:url(../***.png) center no-repeat;
width:200px;
height:150px
}
html>body div.ff {
background:url(../***.png) center no-repeat;
width:200px;
height:150px
}
<1/style>
代码示例：
<body bgcolor="#eeeeee">
PNG透明：
复制内容到剪贴板
代码:
<div style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://www.bokemx.com/demo.png");width:200px;height:150px"></div>
PNG不透明：<br>
<img src="http://www.bokemx.com/demo.png">

注意：使用本代码前必须保证PNG图片有透明的部分



切换CSS和IE下的透明PNG原帖：http://www.b3inside.com/webstandards/000396.html

-------------------------------------

今天做新模板的DEMO页面，遇到两个问题：
1.实时切换CSS样式
2.给切换样式的<Select>标签所在div加了个背景图片，需要使用透明PNG图片

这两个问题以前就遇到过，但这东东也不经常用，就知道这两个问题可以解决，并没有记如何解决，搜了一下，然后改了改代码就成了。

下面一个个问题解决：

1.实时切换CSS样式
首先，因为我并不需要记录用户所更换的样式，所以不必使用Cookie，就用这个方法来实现切换行为：
styleswitcher.js
复制内容到剪贴板
代码:
function setActiveStyleSheet(title) {
var i, a, main;
if (title) {
for(i=0; (a = document.getElementsByTagName('link')[i]); i++) {
if(a.getAttribute('rel').indexOf('style') != -1 && a.getAttribute('title')) {
a.disabled = true;
if(a.getAttribute('title') == title) a.disabled = false;
}
}
}
}
function getActiveStyleSheet() {
var i, a;
for(i=0; (a = document.getElementsByTagName('link')[i]); i++) {
if(a.getAttribute('rel').indexOf('style') != -1 && a.getAttribute('title') && !a.disabled) return a.getAttribute('value');
}
return null;
}
由于用到下拉框，所以把要使用的样式名称都放这里：
index.html
复制内容到剪贴板
代码:
<select onchange="setActiveStyleSheet(value)">
<option value="ac">ac</option>
<option value="ac2">ac2</option>
<option value="http://www.bokemx.com/ac3">ac3</option>
</select>
样式表文件放到那里你知道的，注意两点：
1.rel="stylesheet"表示默认显示，而其余的都rel="alternate stylesheet"
2.加title，如title="demo1" />

2.给切换样式的<Select>标签所在div加了个背景图片，需要使用透明PNG图片
复制内容到剪贴板
代码:
/* For IE 6.0 */
* html #switchStyle{
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="http://www.bokemx.com/img/bgcanvas.png");
background:none;
}
值得一提的是todd的说明：
引用:
使用这个滤镜调用的图片文件地址必须是相对于页面文件的，而不是像普通的背景一样，是相对于css文件的。