PNG 檔案在 IE 中不會顯示透明度─網頁研習室【網頁製作系列報導】─智邦公益電子報
enews.url.com.tw · August 18,2016壹、報導前言：
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 瀏覽器還有以下幾項 Bugs：
微軟在世界上算是非常有知名度大的公司，而 IE 瀏覽器也是使用人數最多的一種上網瀏覽網頁工具之一。
因為 Internet Explorer 在設計的時候，完全沒有遵循 W3C 國際標準規範，以致造成後續一大堆問題。
這是微軟在自己的技術支援服務網站描述的文章：PNG 檔案在 Internet Explorer 中不會顯示透明度 Go 。
經上網一查原來 IE 瀏覽器，還有以下幾項嚴重的 Bugs：
Double Float-Margin Bug
Duplicate Indent Bug
Float Model Problem
Three Pixel Text Jog
Escaping Floats Bug
Creeping Text Bug
Phantom Box Bug
Peekaboo Bug
Inherited margins on form elements
Expanding Box Problem
Line-height Bug
Disappearing List-Background Bug
Guillotine Bug
IE 6 Duplicate Characters Bug
這些以後我們有機會再為大整理解決之道吧。
參、在開始之前我們先認識一下 PNG 檔案：
PNG 非破壞性網路傳輸圖形格式 (Portable Network Graphics)，也可稱為可攜式網路圖形。
PNG 於 1996 由 Unisys公司向 W3C (World Wide Web Consortium) 提出並得到推薦認可的多媒體圖形格式。
PNG 將圖形檔案大小壓縮到極限，但又能保留所有與畫像品質，以利網路傳輸及電腦美術工作者需要。
PNG 是一種無損數據壓縮點陣圖圖形文件格式，具備阿爾法 (AlphaImageLoader) 通道 (半透明) 等特性。
PNG 的特點：二維交錯顯示、透明區域、非破壞性高階無失真壓縮、提供額外資訊、無專利權問題。
PNG 的缺點：不支援單個檔案儲存多張圖片、不支援 CYMK 模式、不能儲存 DPI 資訊、無法製作 gif 動畫格式。
想要了解更多 PNG 檔案，請上 W3 網站 或維基百科，自由的百科全書進一步查看 。
肆、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。<br>
注意：加入 iepngfix.htc 指令後，對這些本身就無需處理 PNG 檔案問題的瀏覽器，也不該受影響。<br>
您必須使用 IE 6.0 以下瀏覽器才能觀看到範例實際變化效果，如果您使用免費或便宜主機，恐怕無法支援(載入) HTC 行為。
如果您沒有 IE 6.0 以下瀏覽器？下面第捌、項有個免費不錯的 IE Tester 軟體，值得從事網頁工作者列入必備工具使用。
為了讓您能夠實際比較查看，我製作這個範例給大家參考 Go 。
陸、認識 HTC (HTML Component) 指令：
HTC 的全名為 HTML Component，它可將 JavaScript 內崁在裡面，也可用 CSS 的方式將 .htc 檔案呼叫進來。
HTC 是從 IE5.0 開始的新技術，它是從 CSS 裡的 behavior 延伸出來的，因此可以透過 CSS 直接把功能散佈到整個網站。
HTC 的主要優點之一就是：瀏覽器將一直掛起頁面解析直到輸入文件全部被導入為止，常見用於日曆代碼 (Calendar) 功能。
HTC 文件的架構：一個標準的 HTC 檔含有一個 Script 區塊和一對可選的 Component 標記 (如下)。
為了讓您能夠實際比較查看，我製作這個範例給大家參考 Go 。
柒、其他解決辦法與技巧：(很抱歉！僅提供付費會員使用)
01.加入 JavaScript pngfix.js 程式：
這個程式只使用一個 JavaScript 程式，就能將每張不會顯示透明度 PNG 圖檔變成透明圖檔，非常簡單好用。
注意：加入 pngfix.js 程式後，對這些本身就無需處理 PNG 檔案問題瀏覽器，也不受影響。<br>
為了讓您能夠實際比較查看，我製作這個 (pngfix.htm) 範例給付費會員參考。
詳細使用方式，請參考原作者png 網站，非本站教學會員不接受指導。
02.加入 img { behavior: url("png2.htc") } 指令：
這個與加入 iepngfix.htc 指令類似，差別是國人自己設計出來的，經實際測試我列的所有瀏覽器都可正常顯示。
注意：加入 img { behavior: url("png2.htc") } 指令後，對這些本身就無需處理 PNG 檔案問題瀏覽器，也不受影響。
為了讓您能夠實際比較查看，我製作這個 (png2.htm) 範例給付費會員參考。
詳細使用方式，請參考原作者Vince's Blog 網站，非本站教學會員不接受指導。<br>
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 。
玖、如何完整取得所有資料：
我在網路上蒐集更多解決 PNG 檔案在 IE 中不會顯示透明度辦法與技巧，會員請打開 pro/01/url.txt 自行參考。
您需要這份完整報導資料嗎？學習上有困難嗎？您想永久長期取得網頁研習室有關網頁製作教材嗎？
如果您想完整取得電子報內所有檔案資料，我們提供燒錄光碟片給您Go 。
凡加入教學會員者，可獲得半年期線上指導及所有報導完整的資料光碟乙片。
詳細內容：語法教學、第一電子報、第二電子報、第三期電子報、第四期電子報、網頁圖窟。
為讓您學習不終斷，即日起推出凡購買教材，可加選是否於第四期電子報報導完閉後補送完整教材一片！
已購買教材或教學會員，如需本報導資料歡迎寫信註明編號免費索取，您也可加價 100 元，於本期報導完畢後一次完整取得。
特別聲明：以上檔案全部取自網路綠色軟體其版權均屬原創公司所有，完全免費，不含於教學(材)費用內。
拾、結論與建議：
本站所有報導資料，歡迎網友加入鏈結或轉載內容，惟請保留文章完整，並註明此 引用來源 ，謝謝您的支持與配合。
本報每篇報導都花上 8 小時以上搜集、整理及撰稿，絕對值得初學者或想徹底學會 HTML 語法網友永久保存。
強烈建議您 學會 HTML 語法 ，她真的簡單易學，懂了她您就能駕馭她，讓您使用所見即所得軟體更得心應手。
本報導屬於完全免費性質， 索取教材資料 屬個人自由意願，而回饋給您的光碟片，則是我們的誠意而已。
一篇保證前所未見的 HTML 教學課程，絕對是您學習 HTML 的好教材，強烈建議您進入實際體驗一下。
本電子報報導資料，未來將繼續每隔 30 日發表一次，以嘉惠更多想學會 HTML 網友，歡迎 繼續訂閱 。
本報導內容或資料，因限人力、時間，非教學會員，不接受任何疑惑解答，敬請見諒。
