瀏覽器兼容性調試方法論：以 Firefox 為基準、F12 模擬、Polyfill 降級、CSS Reset 標準化

調試流程

1. 基準瀏覽器：以 Firefox (Gecko) 或 Chrome (Blink) 為開發調試基準，遵循 W3C 標準。
2. F12 開發者工具：
   • Elements 面板檢查 CSS 計算樣式、盒模型差異。
   • Console 捕獲 JS 語法錯誤、API 缺失警告。
   • Network 確認資源加載失敗 (404/CORS)。
   • Device Toolbar 模擬移動端視口、User-Agent。
3. IE/Edge 兼容模式：F12 → Emulation → Document Mode 切換 IE 8/9/10/11 邊緣模式快速復現。
4. Polyfill/Shim 降級：
   • ES6+ 語法：@babel/preset-env + core-js 按目標瀏覽器自動注入。
   • CSS 變量/Grid/Flex：css-vars-ponyfill、flexibility (IE 10+)。
   • HTML5 元素：html5shiv (IE 6-9)。
5. CSS Reset / Normalize：引入 Normalize.css 統一各瀏覽器默認樣式差異。
6. 自動化回歸：Selenium/WebDriver + BrowserStack/Sauce Labs 跨瀏覽器矩陣測試。

常見 IE 問題清單

• console.log 未定義 (IE 9- 未開啟 F12) → 封裝安全日誌函數。
• Array.prototype.forEach 缺失 → es5-shim。
• event.srcElement vs event.target → 統一 e = e || window.event; target = e.target || e.srcElement。
• CSS display: flex 不支持 IE 9- → 降級 float/inline-block 或引入 flexibility。