一行代碼解決 IE6-IE10 兼容性問題：X-UA-Compatible 最佳實踐

一行代碼解決 IE6-IE10 兼容性問題

在頁面 <head> 標籤內**第一行**添加以下 meta 標籤，即可強制 IE 使用最新渲染引擎（Edge 模式），避免進入兼容模式導致排版錯亂、JS 報錯：

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

原理解析

• IE=edge：指示 IE 使用當前版本最高級渲染引擎（IE10 用 IE10 標準模式，IE9 用 IE9 標準模式...）。
• 必須放在 head 首位：在任何其他標籤（包括 <title>、<meta charset>）之前，否則可能不生效。
• HTTP 響應頭同樣有效：Nginx/Apache/Tomcat 配置 add_header X-UA-Compatible "IE=edge"; 效果相同，且不污染 HTML。

常見誤區

1. 寫成 content="IE=10"：會強制 IE10 以下版本也用 IE10 模式（不存在），導致降級到 Quirks 模式。
2. 放在 <body> 或腳本之後：瀏覽器已確定渲染模式，meta 無效。
3. 以為能修復所有 CSS/JS Bug：僅解決文檔模式問題，具體 CSS Hack、Polyfill 仍需按需補充。

現代項目建議

隨著 IE 官方停止支持（2022年6月），新項目**不再需要**兼容 IE。若維護老項目，可保留此標籤；新項目建議在 package.json 的 browserslist 中移除 ie 相關配置，構建工具（Webpack/Vite）將自動移除 IE Polyfill，減包提速。