IE7/IE9 CSS 兼容性差異排查與 Hack 方案

核心差異點

排查步驟

1. 確保頁面頂部聲明 <!DOCTYPE html> 觸發標準模式。
2. 引入 normalize.css 或 reset.css 統一基線。
3. 使用 F12 開發者工具（IE9 自帶，IE7 需裝 IE Developer Toolbar）逐元素對比 Computed Styles。
4. 針對差異屬性編寫 Hack 或條件註釋引入單獨 CSS。

常用 Hack 模式

/* IE7 Only */
*+html .selector { property: value; }

/* IE9 Only */
:root .selector { property: value\9; }

/* 條件註釋引入獨立文件 */
<!--[if IE 7]><link rel="stylesheet" href="ie7.css"><![endif]-->
<!--[if IE 9]><link rel="stylesheet" href="ie9.css"><![endif]-->

現代建議

IE7/8/9 市場份額已極低，建議：

• 項目引入 @babel/preset-env + core-js + postcss-preset-env 自動降級。
• 通過 browserslist 明確目標瀏覽器，構建工具自動注入 Polyfill 與前綴。
• 若必須支持 IE7，考慮優雅降級：核心功能可用，非關鍵樣式允許差異。