> > 修正PNG背景圖片在IE的錯誤顯示

修正PNG背景圖片在IE的錯誤顯示

上一篇修正 PNG 圖片在 IE 的錯誤顯示
所提到的 pngfix
雖然可以修正 PNG 格式的圖片
但是並不支援 PNG 格式的背景圖片
以下有幾種方法
可以修正 IE 中 PNG 背景圖片的錯誤顯示

CSS 濾鏡

在欲修正的元素或樣式中
(#ID.Class )
加入 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='圖片.png', sizingMethod='scale');
說明
欲修正的元素或樣式 {
width:寬度px;
height:高度px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='圖片.png', sizingMethod='scale');
}
範例
#ResetIEpng {
width:120px;
height:50px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='
http://reset.timelizard.com/reset.png', sizingMethod='scale');
}
<!--
PNG 圖片很多的話就...
-->

Sleight of hand
請先下載 bgsleight
然後在 <head> 跟 </head> 之間
( Blogger 則是找到 </b:skin> 跟 </head> )
貼入下列程式碼
HTML
<!--[if lt IE 7]><script type="text/javascript" src="上傳到網路空間的bgsleight.js "></script><![endif]-->
Blogger
<!--[if lt IE 7]><script language='JavaScript' src='上傳到網路空間的bgsleight.js' type='text/javascript'/><![endif]-->
<!--
關於 <!--[if lt IE 版本]> 的判斷方式
可以參考 蕃茄腦袋: [Hacks] HTML 條件式
-->

IE PNG Fix v1.0 / 2.0 Alpha 3
請先下載 iepngfix
基本上只會用到 iepngfix.htc 以及 blank.gif
然後在欲修正的元素或樣式中
(#ID.Class )
加入 behavior: url(上傳到網路空間的iepngfix.htc)
說明
欲修正的元素或樣式 {
behavior: url(上傳到網路空間的iepngfix.htc)
}
範例
#ResetIEpng {
behavior: url(http://reset.timelizard.com/iepngfix.htc)
}
<!--
上面是單獨指定的用法
如果 PNG 圖片用很多的話
可以廣泛指定
如: imgdiv
不過太耗資源
不建議這樣使用
-->

完全不要用 PNG 圖片

<!--
這是我目前用過最棒的方法!
-->