IE6 顯示透明 PNG 終極解法：UnitPNGFix 1KB JS 輕鬆搞定 img 與 background-image

痛點：IE6 原生不支援 PNG Alpha 透明

IE6 只能正確顯示 GIF 的布林透明（全透明/全不透明），對 PNG 的 256 階 Alpha 通道一律渲染為灰藍色背景。這讓網頁設計師在 2000 年代末至 2010 年代初極度頭痛：漂亮的半透明陰影、圓角、疊層效果，要么降級成 GIF 鋸齒邊緣，要么轉存 JPEG 失去透明層，要么寫大量 CSS Hack。

銀彈：UnitPNGFix

• 官方下載：https://labs.unitinteractive.com/unitpngfix.php
• 體積：1 KB（壓縮後），極輕量。
• 授權：免費開源，可商業使用。

六大核心優勢

部署步驟（三行代碼）

<!--[if IE 6]>
<script src="js/unitpngfix.js"></script>
<![endif]-->

1. 下載 unitpngfix.js 放入專案 js/ 目錄。
2. 在 HTML <head> 區塊加入上方條件註解。
3. 確認 PNG 圖片路徑正確，重新整理 IE6 測試。

進階配置選項

若需客製化，可在引入前定義全域變數：

<script>
var UnitPNGFix = {
  // 指定透明 GIF 佔位圖路徑（預設為 1x1 透明 GIF）
  clearImage: 'images/blank.gif',
  // 是否處理 background-image（預設 true）
  processBackgrounds: true,
  // 針對特定 CSS 選擇器限制處理範圍（預設所有）
  selector: '.png-fix'
};
</script>
<!--[if IE 6]><script src="js/unitpngfix.js"></script><![endif]-->

原理速覽

UnitPNGFix 利用 IE 專屬 AlphaImageLoader 濾鏡：
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='...', sizingMethod='scale');
腳本掃描 DOM 中所有 <img> 與含 background-image 的元素，偵測副檔名為 .png，動態注入濾鏡並隱藏原始 src/背景圖，同時修正濾鏡已知的 z-index 疊層、滑鼠事件穿透等 Bug。

現代視角：優雅降級策略

雖然 IE6 市佔率已近乎零，但維護舊系統時仍可能遇到。建議採用：

1. 現代瀏覽器直接使用原生 PNG。
2. IE6/7 透過條件註解載入 UnitPNGFix。
3. IE8+ 原生支援 PNG Alpha，無需處理。
4. 若專案已棄用 IE6，直接移除腳本，減少請求。

小結

UnitPNGFix 以 1 KB 體積、零配置複雜度、完整支援 img 與 background-image，成為 IE6 時代 PNG 透明問題的「標準答案」。雖然時代已變，但這段代碼展現的「特性偵測、條件載入、優雅降級」工程思維，至今仍值得前端工程師學習借鑑。