圖像標籤img的跨瀏覽器案例解析： IE 5.5 / 6 不支援 PNG 圖片透明背景

[圖像標籤img] IE 5.5 / 6 不支援 PNG 圖片透明背景

1. 相異瀏覽器

IE 5.5 / 6

2. 問題描述

IE 5.5 / 6 只要遇到有使用「透明背景」設定的 PNG 圖片，就會發生問題，原本應該要透明的部分都會變成灰色的，而這個小瑕疵一直到 IE 7 才做出修正。

3. 解決方法

1.盡量避免用 PNG 透明背景

(Hsinping建議：應該不要建議「盡量避免使用 PNG」比較好。)

圖片的使用主要分為二大類：1. 在 HTML 中使用圖片標籤；2. 在 CSS 中使用 background 屬性。

因此，PNG 圖片透明度的解法也要從這二大類著手。

1. 在 HTML 中使用圖片標籤

使用 CSS 與 HTML 配合的解法：

http://www.cnblogs.com/yuzhongwusan/archive/2009/04/17/1438119.html (方法二)

使用純 Javascript 的解法：

http://www.cnblogs.com/yuzhongwusan/archive/2009/04/17/1438119.html (方法三)

2. 在 CSS 中使用背景屬性（background）

解決方法：使用 IE 專有的「filter」(屬性)。

參考資料：
http://leah.pixnet.net/blog/post/24046364
http://www.cnblogs.com/yuzhongwusan/archive/2009/04/17/1438119.html (方法一)

CSS Example:

.the_png_iamge {
    background: url('bg.png') no-repeat left top ;
    _filter:progid: DXImageTransform.Microsoft.AlphaImageLoader(src='bg.png', sizingMethod='scale');
    _background: none;
}

在這個 CSS 解法裡面，我們可以看到在最後的 background 屬性前面有加底線 (_)，這個目的是為了讓「IE6 之前的版本」看得到，其他的版本看不到。背景設定為「none」的主因是因為 filter 裡面的 AlphaImageLoader 已經把背景設為透明的圖片模式，但原來的 background image 還是不透明的，會把效果蓋掉，所以要把 background 設為 none。

此外，在「AlphaImageLoader」中，我們還可以看到 sizingMethod 這個屬性。sizingMethod 有 crop、image、scale 三種值。預設是image，也就是PNG圖片照原本圖片大小顯示。如果使用scale的話，圖片會依照div的尺寸縮放；如果用crop且圖片尺寸比DIV還大的話，圖片超出DIV的部分會被切掉。

在使用上的建議原則上是如果 PNG 圖片使用的量小，建議使用 2~3 行就可解決的「filter」解法，如此 CSS 碼量小而也不致重複。而如果是 PNG 使用的量大，或是難以轉為在 CSS 的情況下使用，建議可使用 Javascript 的解法。

另外，若背景圖片已設為 png 之透明模式，又需在裡面寫上「文字」（例如在 DIV 裡可），則在 IE6 中這個文字也會跟著「透明」起來。這個效果當然（或者基本上）不是我們要的。這時候，我們可以在這個 DIV 裡加上「position:relative;」的 CSS 設定。如此，文字的「透明」效果就會消失了。同時，如這個文字是超連結，在超連連標籤（a）裡面也要加上「position:relative;」。（此作法之參考資料：http://blog.xuite.net/mcda/warehouse/17182144）


在這邊也和大家分享一下所謂的「CSS Hack」，以以下這個例子說明：

body {  
    color: red; /* all browsers, of course */  
    color: green\9; /* IE8 and below */  
    *color: yellow; /* IE7 and below */  
    _color: orange; /* IE6 */  
}

我們可以看到在 CSS 的「值」後面加上「\9」，這樣就只有「IE8 和以下版本」的瀏覽器看得到（看得懂）。所以以後要是有什麼跨瀏覽器的設定是只希望 IE8 以下有效果的，就在那一行 CSS 設定中的值後面加「\9」就可以了。

同時，針對「IE7 和以下版本」的瀏覽器，就是在 CSS「屬性」前面加上「*」。針對「IE6」的瀏覽器，就是在 CSS「屬性」前面加上「_」。這樣基本上就是針對 IE 系列的「CSS Hack」了。


2.使用微軟IE專用的濾鏡
為各個瀏覽器添加不同設定的CSS

HTML程式碼：


CSS程式碼


3.透過 AlphaImageLoader 篩選器(filter)修正 IE 5.5 / 6 無法正常顯示 PNG 透明背景的問題


參考文章：
1.http://blog.miniasp.com/post/2008/07/20/Fix-IE-PNG-Transparency-Problem-in-IE-5-6.aspx
2.http://tw.myblog.yahoo.com/richard-tung/article?mid=1729&prev=2576&l=f&fid=61
3.http://philsu.tw/index.php/deisgn-treasures/tutorials/item/use-css-control-ie6-show-png-image



(編輯記錄)