CSS 瀏覽器兼容性 Hack 大全：從 inline-block 到 PNG 透明

前言

早期網頁開發常面臨各瀏覽器渲染差異，特別是 IE 系列。本文彙整常見的 CSS Hack 技巧，涵蓋 display: inline-block 觸發、IE6 雙倍邊距、版本專屬 Hack、PNG 透明黑框、元素消失、樣式載入不全等實戰問題，供維護舊專案時參考。

一、讓 IE6/IE7 支援 display: inline-block

方法一：分兩階段宣告

.test { display: inline-block; /* 其他樣式 */ }
.test { display: inline; }

先宣告 inline-block 觸發 hasLayout，再以第二條規則覆寫為 inline，IE6/IE7 即可呈現 inline-block 效果。

方法二：使用專屬前綴（推薦）

.test {
    display: inline-block;
    *zoom: 1;           /* 觸發 hasLayout */
    *display: inline;   /* IE6/IE7 識別 */
}

單一規則組即可完成，維護性較佳。

二、IE6 雙倍浮動邊距 Bug

當浮動元素設定 margin-left（左浮動）或 margin-right（右浮動）時，IE6 會將邊距加倍。解決方式極簡：

.float-box { _display: inline; }

只需對 IE6 設定 display: inline 即可消除雙倍邊距，不影響其他瀏覽器。

三、IE6-IE10 版本專屬 CSS Hack 對照表

p {
    color: black;   /* IE10 */
    color: orange;  /* IE8, IE9 */
    *color: blue;   /* IE6, IE7 */
    _color: red;    /* IE6 */
}
:root p {
    color: yellow;  /* IE9 */
}

善用選擇器與前綴差異，可精準針對各版本套用樣式。

四、IE7/IE8 PNG 透明背景出現黑框

原因通常在於使用了 filter: alpha(opacity=100) 等濾鏡。移除濾鏡或改用 opacity 即可解決。

五、IE7/IE8 元素莫名消失、無法點擊

常見於使用 text-indent: -9999em; font-size: 0 隱藏文字的情況。解決辦法：

• 給元素加上背景色（如 background: red）
• 若不想被看見，改用 opacity: 0; filter: alpha(opacity=0)

六、IE7/IE8 樣式載入不完全

通常是 CSS 檔案的 @charset 宣告與實際編碼不一致。統一編碼（建議 UTF-8）即可修正。

結語

隨著現代瀏覽器普及，上述 Hack 已較少用於新專案。但在維護舊系統時，這些技巧仍能快速定位並解決兼容性疑難雜症。建議配合條件註釋或工具自動化處理，保持代碼乾淨。