Welcome! 登入 註冊
專區首頁 專區百科 專區論壇 專區部落格 專區地圖

Advanced

圖像標籤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



Edited 6 time(s). Last edit at 02/12/2012 04:07PM by HP.
(編輯記錄)