解決 IE6/IE7/Firefox padding 不兼容的實用技巧

前言

在早期的網頁開發中，瀏覽器對 CSS 盒模型的解析差異是前端工程師常遇到的頭痛問題。特別是 IE6、IE7 與 Firefox 對 padding 的渲染經常不一致，導致版面錯位。本文整理了三種常見情境，並提供相對應的 CSS Hack 寫法，幫助你快速修正跨瀏覽器的間距差異。

情境一：IE6 正常，IE7 / Firefox 異常

當 IE6 顯示正常，但 IE7 和 Firefox 出現間距過大或過小時，可利用 !important 讓現代瀏覽器優先套用特定數值，再針對 IE6 覆寫。

.box {
    padding: 7px !important; /* 針對 Firefox / IE7 */
    padding: 6px;            /* 針對 IE6 */
}

原理：IE6 不支援 !important，會忽略第一行繼續套用第二行；其他瀏覽器則遵循重要性規則採用 7px。

情境二：IE6 / IE7 正常，Firefox 異常

此時需針對 Firefox 給予獨立數值，同時讓 IE6/IE7 共用另一組數值。可使用 * 前綴（IE6/IE7 皆識別）搭配標準寫法。

.box {
    padding: 7px;       /* 針對 Firefox */
    *padding: 6px;      /* 針對 IE6 / IE7 */
}

注意：IE7 也能識別 !important，因此若在第一行加上 !important 反而會讓 IE7 也套用 7px，導致失效。

情境三：IE6、IE7、Firefox 三者皆不同

若三個瀏覽器都需要不同的 padding，可結合底線 _ 前綴（僅 IE6 識別）與星號 * 前綴（IE6/IE7 識別）層層覆寫。

.box {
    padding: 7px;       /* 針對 Firefox */
    *padding: 6px;      /* 針對 IE7 */
    _padding: 5px;      /* 針對 IE6 */
}

解析順序：Firefox 只讀第一行；IE7 讀前兩行，後者覆蓋前者；IE6 三行皆讀，最終以最後一行 _padding 為準。

總結與建議

雖然上述 Hack 能解決舊版瀏覽器兼容性問題，但現代開發已極少需支援 IE6/IE7。建議採用標準盒模型（box-sizing: border-box）並配合條件註釋或 PostCSS 自動處理前綴，維護更簡潔、可維護的樣式表。