IE 與 Firefox 常見 JavaScript 兼容性差異完整對照表

前言

雖然現代瀏覽器已高度標準化，但維護舊專案時仍需面對 IE 與 Firefox（Gecko）的差異。本文整理 25 項核心差異與解決方案。

核心差異對照表

現代化建議

1. 使用 Polyfill（如 core-js）填補標準 API 差異
2. 採用 Babel + browserslist 自動轉譯語法
3. 用 feature detection 替代瀏覽器嗅探（if ('querySelector' in document)）
4. 引入 Normalize.css 統一預設樣式
5. 建立 BrowserStack 自動化測試流程

快速修正清單

// 統一事件處理
function addEvent(el, type, fn) {
    if (el.addEventListener) el.addEventListener(type, fn, false);
    else el.attachEvent('on' + type, fn);
}

// 統一取元素
const $ = (id) => document.getElementById(id);

// 統一事件對象
function fixEvent(e) {
    e = e || window.event;
    e.target = e.target || e.srcElement;
    e.preventDefault = e.preventDefault || function(){ e.returnValue = false; };
    e.stopPropagation = e.stopPropagation || function(){ e.cancelBubble = true; };
    return e;
}