css ie滤镜png图片不兼容ie6/ie7/ie8解决办法

首先我们选择一幅带有半透明点的png图片，页面的背景色是#660，观察在ie6/7/8下的表现。因为ie6不支持半透明点，所以就变成了灰色

<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" />兼容模式就没问题了。

<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>

经过一番测试，div嵌套img仍然行不通。我们不妨用div嵌套div，而且不用background加载图片。如果你记性好的话，应该知道ie有个alphaimageloader的滤镜，我们试着用它加载png： 这回可总算对了！不仅在ie7，ie8下正确显示，连咱们的老祖宗ie6都通了。大功告成！