今天突然发现一个很严重的问题：在IE6,7,8下带有Alpha通道的png图片设置滤镜，图片的半透明像素全都变成了黑点！
虽说IE的滤镜不是标准的东西，不推荐使用，但是对于处理透明度这类问题还是经常会用到。下面就讨论最常用的一个滤镜：filter:alpha()。
说白了，我们就是给一个带半透明像素点的PNG-24图片设置透明滤镜。这在其他浏览器上都是没有任何问题的，唯独IE！
这类效果并非罕见。现在PNG格式使用越来越多，他不仅可以带有alpha通道，而且压缩率也比gif高。如果你在做一个图片淡入浅出的效果，图片里正好带有半透明的点，那你就会碰到这个问题。
首先我们选择一幅带有半透明点的png图片，注意下面的半透明部分：
页面的背景色是#660，观察在IE6/7/8下的表现。因为ie6不支持半透明点，所以就变成了灰色，这个大家都知道。半透明部分融入了背景色，可以很明显看出来。
然后我们给img元素添加alpha滤镜，这下问题立即暴露出来了：原先下面渐变的圆圈现在变成实心的了，半透明的点都被替换成了黑色！经测试，不仅是alpha滤镜，所有的IE滤镜都会丢失png的半透明像素。
在反复试验后发现，给img添加一个背景色，那些半透明的点又正常了：
<img src="alpha.png" style="filter:alpha(opacity=20); background:#FFF" />
为了不让白色显示出来，将#FFF改为transparent，但这样一来，半透明像素又罢工了:(
不过对于本例页面背景是纯色的情况下，设置和页面一样的背景色倒是行得通!
<img src="alpha.png" style="filter:alpha(opacity=20); background:#660" />
但是绝大多数情况下图片后面都是有复杂的背景的，所以这样还是行不通。我们尝试在img外嵌套div，把滤镜设置在div上面：
<style>
body {background: #660}div
{position:absolute;filter: alpha(opacity=20);width: 256px;height: 256px;
}img
{position:absolute;
}
</style>
<div><img src="alpha.png" />
</div>
这次在IE8里出现了一个很诡异的现象：img元素没有被应用上滤镜！原因就是其设置了position:absolute。如果去掉这句，就和IE7表现一样。由此可见ie8还有这样一个bug：滤镜不会应用到绝对定位的子元素上！不过在加了<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />兼容模式就没问题了。
经过一番测试，div嵌套img仍然行不通。我们不妨用div嵌套div，而且不用background加载图片。如果你记性好的话，应该知道ie有个AlphaImageLoader的滤镜，我们试着用它加载png：
<style>
body{background: #660}.out
{filter: alpha(opacity=20);width: 256px;height: 256px;
}.in
{filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='alpha.png');width: 256px;height: 256px;
}
</style>
<div class="out"><div class="in"></div>
</div>
这回可总算对了！不仅在ie7，ie8下正确显示，连咱们的老祖宗ie6都通了。大功告成！
所以，以后制作PNG图片淡入浅出的效果时，IE下应使用AlphaImageLoader来载入图片，代替背景图，以避免半透明像素的丢失：
<style>
body{background: #660}
.out
{
width: 256px;
height: 256px;
filter: alpha(opacity=20);
opacity: 0.2;
}
.in
{
background: url(alpha.png);
*background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='alpha.png');
width: 256px;
height: 256px;
}
</style>
<div class="out">
<div class="in"></div>
</div>