CSS 跨瀏覽器相容性核心要點深度解析

前言

XHTML+CSS 架構雖帶來結構與表現分離的優勢，但瀏覽器渲染引擎差異 (特別是 IE6/7 vs Firefox/Chrome) 常導致版面崩壞。本文彙整實戰中最高頻的相容性陷阱與解決方案。

核心相容性要點

1. DOCTYPE 宣告決定渲染模式

務必在文件最頂端宣告 <!DOCTYPE html> (HTML5) 或嚴格 DTD，觸發「標準模式」。缺少 DOCTYPE 將啟用「怪異模式」，導致盒模型解析差異極大。

2. 水平置中：margin: 0 auto 的前提條件

• 現代瀏覽器 (FF/Chrome/IE8+)： 父層需有寬度，子層設定 margin-left: auto; margin-right: auto; 即可置中。
• IE6/7 (或怪異模式)： 不識別 auto。解決：父層加 text-align: center，子層加 text-align: left 重置文字對齊。

3. 盒模型差異：Padding/Border 是否撐大盒子

• W3C 標準盒模型 (現代瀏覽器)： width = 內容寬度。加上 padding/border 會撐大整體視覺寬度。
• IE 盒模型 (IE6 怪異模式/IE5.x)： width = 內容 + padding + border。整體視覺寬度固定。
• 解決方案： 盡量不同時設定 width 與 padding/border；或使用 box-sizing: border-box (IE8+) 統一為 IE 模型 (現代最佳實踐)。

4. !important 優先級 Hack

• 現代瀏覽器支援 !important 提升優先級。
• IE6/7 忽略 !important (特定情況)。
• 可利用此差異針對現代瀏覽器覆蓋樣式，但不推薦大量使用，維護性差。優先用選擇器權重解決。

5. 垂直置中經典方案

單行文字：設定容器 line-height 等於 height，並 vertical-align: middle。
多行/區塊：現代專案首選 Flexbox (display: flex; align-items: center; justify-content: center) 或 Grid。舊專案可用 display: table-cell; vertical-align: middle。

6. 滑鼠游標 cursor: pointer vs hand

• cursor: pointer：標準寫法，所有現代瀏覽器支援。
• cursor: hand：IE 專屬舊寫法。僅使用 pointer 即可。

7. 連結區塊化與浮動修正

導覽列常見問題：<a> 行內元素無法設定寬高/上下 padding。
解決：display: block (或 inline-block) + float: left (或 Flex 佈局)。同時給父容器 overflow: hidden 或 clearfix 清除浮動，避免高度塌陷。

經典 IE Hack 技巧整理 (歷史參考)

1. Box Model Hack (Tantek Hack)

div {
  width: 300px !important; /* 現代瀏覽器讀此行 */
  width: 340px;            /* IE6 讀此行 (覆蓋上行) */
  /* 實際視覺寬度 300px + 20px padding + 20px border = 340px */
}

2. IE5/IE6 Box Model 差異 Hack

div {
  width: 300px !important;
  width /**/: 340px;  /* IE5.x 支援註解 Hack，IE6 不支援 */
}

3. <ul> 預設間距歸零

ul { margin: 0; padding: 0; } /* 重置瀏覽器預設樣式，極度推薦納入 Reset CSS */

4. XHTML 1.1 腳本屬性規範

<script type="text/javascript"> (移除 language 屬性)。

現代開發建議

• 放棄 IE6/7 支援： 微軟已停止支援，主流框架 (Bootstrap 5+, Vue 3, React 18) 均已棄用。
• 使用 Normalize.css / Reset CSS： 統一瀏覽器預設樣式基線。
• 採用 PostCSS + Autoprefixer： 自動補全廠商前綴，無需手寫 Hack。
• 優先使用現代佈局： Flexbox, Grid 解決 99% 置中、對齊、等高問題。
• Feature Detection： 使用 @supports 或 Modernizr 進行特性偵測，優雅降級。