The Will Will Web

記載著 Will 在網路世界的學習心得與技術分享

修正 IE 5.5 / 6 不支援 PNG 圖片透明背景的問題

IE 5.5 / 6 只要遇到有使用「透明背景」設定的 PNG 圖片,就會發生問題,原本應該要透明的部分都會變成灰色的,而這個小瑕疵一直到 IE 7 才做出修正,不過現在還有很多人還在使用 IE 6 瀏覽器,像我 Blog 的訪客當中,就還有 49.5 % 的使用者是使用 IE 6 的版本,是所有瀏覽器中所佔的百分比最多的。

由於市場上使用 IE 6 的人還這麼多,導致每個網站設計人員都不得不處理這個問題,通常要有效克服這個問題有兩個方法:

  1. 盡量避免用 PNG 透明背景,這也是最簡單的方法了。

    不過,有些時候由於「設計師」的堅持,還是必須一定要用 PNG + 透明背景。你可能會想說使用 GIF 圖檔不是也可以用透明背景嗎?是的,但是因為 GIF 格式的圖檔的顏色數量只有 8bit ( 256 色 ) 而已,所以對於顏色的表現或灰階的表現都比較差,所以在處理「漸層」的時候,用 GIF 時就會感覺很「粗糙」,若改用 PNG 來處理漸層就會很漂亮,這時「設計師」站在美觀的角度來看,就一定要採用 PNG 圖檔格式。

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

    所以在 IE 5.5 / 6 並非「真的」無法顯示 PNG 透明背景,還是有辦法修正的,詳細的說明可參閱微軟技術支援服務的【PNG 檔案在 Internet Explorer 中不會顯示透明度】文件說明。雖然是有解,但是這部分對網頁設計師或套版工程師來說也是一個額外的負擔,尤其是頁面多、圖片多的時候更是累人。

而我今天要講的重點就是如何用比較 Smart 的方法一次解決 IE 5.5 / 6 顯示 PNG 透明背景不支援的問題。目前網路上已經有不少人推出修正 IE 5.5 / 6 修正 PNG 圖檔的解決方案,底下我就列出一些我曾經用過的套件:

  1. Universal transparent-PNG enabler for MSIE/Win 5.5+

    最常用這個,僅使用 50 行不到的 JavaScript 就可以動態修正 PNG 的問題。但無法解決某些使用 PNG 透明圖檔的情況。

  2. IE PNG Fix v1.0 / 2.0 Alpha 2

    這套我有時候會用,但有時候遇到一些較複雜的版面反而會失效,尤其是將 PNG 透明背景圖片用在 CSS 的背景圖屬性(background-image)的時候,但是最近 IE PNG Fix 推出了 2.0 Alpha 2 專門就是用來修正原本 1.0 無法修正的部分,我覺得這點做的很棒。

  3. ie7-js

    功能強大的 ie7-js 提供一組 JavaScript 程式,主要的目的就是希望讓所有 IE 瀏覽器的版本,在顯示(Render)網頁的時候能夠跟在 IE 7 顯示的時候完全一樣。因為 IE 在不同的版本對 HTML 的解譯,以及對 CSS 的解譯上都會有些細微的差異,例如說不同的 HTML 元素(Element)預設的 margin / padding 不一樣的情況。當然,也包括支援 IE 5.5 / 6 不支援 PNG 透明背景的問題。

你可能也會想問我,為什麼我要介紹三套不同的解決方案,為什麼不講一套就好?事實上,你的網站不見得是「全新開發」的,所以在選用不同套件的時候,就必須考量到使用的情境。

例如說,如果網頁設計師在切版的時候如果經驗不足,沒有考量到不同瀏覽器的問題,自己在預覽網頁時可能都只用 IE 7 或 Firefox 等,等到網頁交到套版工程師那邊的時候,要讓工程師來調整許多跨瀏覽器的問題就會變得比較吃力,畢竟工程師不是「視覺系動物」。這時我會比較傾向用第1個套件或第2個套件,但還是要測試過才知道合不合用,有時候第一個套上去用有問題的話,可以換另一個試試。

而如果使用 ie7-js 的話,我覺得比較適合全新的網站建置,且在設計師切版的時期就應該套用,並仔細測試過各個瀏覽器,真的確認沒問題時再全面採用,若要套用在「現有且尚未調整過的網站」的話,可能會是一場災難。