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都通了。大功告成！