修正在IE6上使用PNG透明圖檔時的錯誤

修正在IE6上使用PNG透明圖檔時的錯誤: 因為現在有愈來愈多的機會會在網頁上使用 PNG  透明圖檔，IE7、FireFox …等瀏覽器都有支援，不過 IE 6 以前的反而沒有辦法正確顯示透明效果！以下有幾種修正的方式，大家可以參考看看！

註：除了文章中提到的方式外，也可以用 jQuery的方式來修正，有興趣的可以看看另一篇文章的介紹！
http://tzangms.com/web-design/2265




以下文章來自 http://blog.miniasp.com/post/2008/07/Fix-IE-PNG-Transparency-Problem-in-IE-5-6.aspx

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

留言

張貼留言