|
|
|---|
|
壹、報導前言： PNG 檔案在 IE 6.0 以下版本不會顯示透明度，很多人沒有碰上都不會發現 IE 瀏覽器有這個嚴重 Bug 的問題。 IE 5.5 / 6.0 只要遇到有使用透明背景的 PNG 圖片，就會發生原本應該要透明的部分就會變成灰色的問題。 為了應付 IE Bugs 在顯示網頁的問題，很多設計師創造了很多的 Hack (對付的意思) 來補救他們的設計缺失。 因為如此現在許多人放棄 Internet Explorer 改用 Firefox、 Safari、 Chrome 這些符合 W3C 標準的瀏覽器。 但是 IE 瀏覽器取得方便 (隨機安裝)，初學使用者不懂得更新版本或轉換其他瀏覽器，致使很多人還緊抱它不放。 身為網頁製作者，雖然很頭痛但又不能不考慮這些特定族群，今天就為有此需要者，整理這篇相關資料給您參考。 聲明：網路上類似資料很多，本報導技術資料大多取自網路分享資源，其版權與著作權均為當事人所有，特此聲明。 |
|
貳、經查 IE 瀏覽器還有以下幾項 Bugs： 微軟在世界上算是非常有知名度大的公司，而 IE 瀏覽器也是使用人數最多的一種上網瀏覽網頁工具之一。 因為 Internet Explorer 在設計的時候，完全沒有遵循 W3C 國際標準規範，以致造成後續一大堆問題。 這是微軟在自己的技術支援服務網站描述的文章：PNG 檔案在 Internet Explorer 中不會顯示透明度 Go 。
經上網一查原來 IE 瀏覽器，還有以下幾項嚴重的 Bugs： |
|
參、在開始之前我們先認識一下 PNG 檔案： PNG 非破壞性網路傳輸圖形格式 (Portable Network Graphics)，也可稱為可攜式網路圖形。 PNG 於 1996 由 Unisys公司向 W3C (World Wide Web Consortium) 提出並得到推薦認可的多媒體圖形格式。 PNG 將圖形檔案大小壓縮到極限，但又能保留所有與畫像品質，以利網路傳輸及電腦美術工作者需要。 PNG 是一種無損數據壓縮點陣圖圖形文件格式，具備阿爾法 (AlphaImageLoader) 通道 (半透明) 等特性。 PNG 的特點：二維交錯顯示、透明區域、非破壞性高階無失真壓縮、提供額外資訊、無專利權問題。 PNG 的缺點：不支援單個檔案儲存多張圖片、不支援 CYMK 模式、不能儲存 DPI 資訊、無法製作 gif 動畫格式。 想要了解更多 PNG 檔案，請上 W3 網站 Go 或維基百科，自由的百科全書進一步查看 Go 。 |
|
肆、PNG 檔案在 IE 6.0 以下與 7.0 以上版本所見差異處比較： 在 Internet Explorer 7.0 以上瀏覽器顯示狀況，PNG 檔案，呈現底色：透明，沒有 Bug 問題。 在 Internet Explorer 6.0 以下瀏覽器顯示狀況，PNG 檔案，呈現底色：不透明灰色，存在嚴重 Bug 問題。 PNG 檔案在 1996 年 10 月 1 日成為 W3C 建議後，其實很多網路瀏覽器經過很長時間才開始完全支持 PNG 格式。 請參考 PNG 檔案，底色：不透明灰色網頁比較範例 demo.htm 。 接下來就來介紹使用各種不同技術，解決這個 IE 6.0 以下瀏覽器 Bugs 問題。 |
|
伍、加入 iepngfix.htc 指令： 經實際測試在 IE 6.0 以下瀏覽器 PNG 檔案，不透明灰色問題，已徹底解決，依個人使用經驗，建議採用這個方式最為有效。 以下是本報導所有範例，我測試時使用的瀏覽器與版本： IE 7.0 以上 、Avant 11.5 、Mozilla Firefox 3.5 、Safari 4.0 、Opera 9.63 、Chrome 2.0.172 、Netscape 8.0.3。 注意：加入 iepngfix.htc 指令後，對這些本身就無需處理 PNG 檔案問題的瀏覽器，也不該受影響。 您必須使用 IE 6.0 以下瀏覽器才能觀看到範例實際變化效果，如果您使用免費或便宜主機，恐怕無法支援(載入) HTC 行為。 如果您沒有 IE 6.0 以下瀏覽器？下面第捌、項有個免費不錯的 IE Tester 軟體，值得從事網頁工作者列入必備工具使用。 為了讓您能夠實際比較查看，我製作這個範例 iepngfix.htm 給大家參考。 |
|
陸、認識 HTC (HTML Component) 指令： HTC 是從 IE5.0 開始的新技術，它是從 CSS 裡的 behavior 延伸出來的，因此可以透過 CSS 直接把功能散佈到整個網站。 HTC 的主要優點之一就是：瀏覽器將一直掛起頁面解析直到輸入文件全部被導入為止，常見用於日曆代碼 (Calendar) 功能。 HTC 文件的架構：一個標準的 HTC 檔含有一個 Script 區塊和一對可選的 Component 標記。 為了讓您能夠實際比較查看，我製作這個範例 htc.htm 給大家參考。 |
|
柒、其他解決辦法與技巧：(很抱歉！因空間與流量問題，以下所有實際範例僅提供付費會員使用) 注意：本段教材除教材會員可完整取得及教學會員可接受線上指導外，訪客與訂閱戶請自行參考所提供網址免費學習。 01.加入 JavaScript pngfix.js 程式： 這個程式只使用一個 JavaScript 程式，就能將每張不會顯示透明度 PNG 圖檔變成透明圖檔，非常簡單好用。 注意：加入 pngfix.js 程式後，對這些本身就無需處理 PNG 檔案問題瀏覽器，也不受影響。 為了讓您能夠實際比較查看，我製作這個 (pngfix.htm) 範例給付費會員參考。 詳細使用方式，請參考原作者 PNG in Windows IE 網站，非本站教學會員不接受指導。 02.加入 img { behavior: url("png2.htc") } 指令： 這個與加入 iepngfix.htc 指令類似，差別是國人自己設計出來的，經實際測試我列的所有瀏覽器都可正常顯示。 注意：加入 img { behavior: url("png2.htc") } 指令後，對這些本身就無需處理 PNG 檔案問題瀏覽器，也不受影響。 為了讓您能夠實際比較查看，我製作這個 (png2.htm) 範例給付費會員參考。 詳細使用方式，請參考原作者 Vince's Blog 網站，非本站教學會員不接受指導。 03.加入 AlphaImageLoader 篩選器： 這是微軟在自己的技術支援服務網站文章介紹的 AlphaImageLoader 篩選器，經實際測試我列的所有瀏覽器都可正常顯示。 注意：加入 AlphaImageLoader 篩選器後，對這些本身就無需處理 PNG 檔案問題瀏覽器，也不受影響。 為了讓您能夠實際比較查看，我製作這個 (alphaimageloader.htm) 範例給付費會員參考。 詳細使用方式，請參考原作者 AlphaImageLoader 網站，非本站教學會員不接受指導。 04.加入 JavaScript DD_belatedPNG 程式： 這是使用 Javascript 程式，我沒實際使用過，但經實際測試我列的所有瀏覽器都可正常顯示。 注意：本程式對 IE 6.0 瀏覽器有效，但對 IE 5.5 瀏覽器無效，不建議使用。 為了讓您能夠實際比較查看，我製作這個 (belatedpng.htm) 範例給付費會員參考。 詳細使用方式，請參考原作者 DD_belatedPNG 網站，非本站教學會員不接受指導。 05.另一個加入 AlphaImageLoader 篩選器： 這是使用兩個 CSS 檔，其中 ie.css 就是運用能 AlphaImageLoader 篩選器處理，經實際測試我列的所有瀏覽器都可正常顯示。 注意：本程式對 IE 6.0 瀏覽器有效，但對 IE 5.5 瀏覽器無效，不建議使用。 為了讓您能夠實際比較查看，附上原始檔案 (ie6png/ie6png.htm) 範例給付費會員參考。 詳細使用方式，請參考原作者 DD_belatedPNG 網站，非本站教學會員不接受指導。 06.加入 JavaScript unitpngfix.js 程式： 這個程式是使用一張 clear.gif 透明圖檔 + JavaScript 程式設計而成，它會於每張 PNG 圖檔下插入這張張 clear.gif 透明圖檔。 注意：本程式僅對 Internet Explorer 6.0 瀏覽器有效，不適用於其他瀏覽器，不建議使用。 為了讓您能夠實際比較查看，我製作這個 (unitpngfix.htm) 範例給付費會員參考。 詳細使用方式，請參考原作者 Unit Interactive 網站，非本站教學會員不接受指導。 |
|
捌、沒有 IE 6.0 瀏覽器無法測試？ 這裡提供一個免費的 IE Tester 軟體，它可測試 IE 5.5、IE 6、IE 7、IE 8 Beta，很試合從事網站製作的人。 網站上有操做示範，IE Tester 最新版本 v0.4.1 (24 MB)，請上官方網站下載 Go 。 安裝與使用非常簡單，他們還提供中文 (Traditional Chinese) 語系下載 Go 。 |
|
玖、如何取得： |
|
拾、結論與建議： |