IE 7/8 兼容 IE 9 級 CSS3 效果的現代化降級策略

核心認知：Polyfill 非銀彈，優雅降級才是正道

嘗試用 ie9.js、ieBetter-min.js 等 Polyfill 在 IE7/8 完美復現 CSS3（圓角、陰影、漸變、Flexbox、Grid）屬於「反模式」：
- 性能災難：JS 模擬渲染引擎，頁面卡頓嚴重。
- 覆蓋不全：偽類、動畫、媒體查詢等核心特性無法模擬。
- 維護地獄：雙套代碼邏輯，Bug 定位極難。

工程化降級方案三部曲

1. 構建工具鏈自動化降級（Postcss + Autoprefixer + cssnano）

// postcss.config.js
module.exports = {
  plugins: {
    'postcss-preset-env': {
      stage: 0,
      browsers: ['ie 7', 'ie 8', 'ie 9'], // 目標瀏覽器
      features: {
        'nesting-rules': true,
        'custom-properties': { preserve: true }, // 保留 CSS 變量供現代瀏覽器
        'color-mod-function': { unresolved: 'warn' }
      }
    },
    'cssnano': { preset: 'advanced' }
  }
};

構建產出：
- main.modern.css：給 IE9+/現代瀏覽器，保留原生 CSS3。
- main.legacy.css：給 IE7/8，自動轉換為 filter: progid:DXImageTransform.Microsoft.gradient(...)、behavior: url(PIE.htc) 等私有濾鏡/HTC 行為。

2. 條件註釋精準投遞

<!--[if lt IE 9]>
  <link rel="stylesheet" href="main.legacy.css">
  <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
  <link rel="stylesheet" href="main.modern.css">
<!--<![endif]-->

關鍵補丁：
- html5shiv：讓 IE6-8 識別 HTML5 語義標簽（article/section/nav...）。
- Respond.js：polyfill 媒體查詢，實現響應式佈局。
- CSS3 PIE (PIE.htc)：HTC 行為文件實現圓角、盒陰影、漸變，需配合 behavior: url(PIE.htc); position: relative; 使用。

3. 視覺差異驗收標準化

替代方案：Chrome Frame / 現代瀏覽器引導

若業務允許，引導用戶安裝 Google Chrome Frame（已停止更新）或直接彈窗提示升級至 Edge/Chrome/Firefox，從根源消除兼容成本。對於企業內網強制 IE 環境，可申請「企業模式站點列表」讓 IE11 以 IE7/8 文檔模式渲染，同時享受現代 JS 引擎性能。

總結：拋棄「像素級完美還原」執念，建立「功能完備、視覺可接受、性能可控」的降級體系，才是專業前端工程師的選擇。