CSS 跨瀏覽器兼容：Firefox 38 佈局異常的根因與重置方案

現象

頁面在 Chrome、IE、Firefox 37 正常，升級到 Firefox 38 後出現佈局偏移、間距異常；調整樣式修復 Firefox 38 又導致其他瀏覽器錯位。

根因分析

Firefox 38 更新了 UA 樣式表，調整了 body、fieldset、legend 等元素的默認 margin/padding/border。各瀏覽器默認樣式本來就不一致，缺乏重置會導致「改一處壞一片」。

解決方案：統一 CSS Reset

方案一：經典 Reset（Eric Meyer）

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

方案二：Normalize.css（推薦，保留有用的默認樣式）

引入 Normalize.css，它修正瀏覽器差異同時保留語義化樣式（如 sup 上標、blockquote 縮進）。

方案三：現代輕量 Reset

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html { font-size: 16px; }
body { line-height: 1.5; }
img, video { max-width: 100%; height: auto; }

最佳實踐

• 在項目最早引入 Reset/Normalize，避免後期「打補丁」。
• 使用 box-sizing: border-box 統一盒模型計算。
• 針對 Firefox 特有屬性（如 -moz-focusring）可單獨覆蓋。
• 納入 CI 自動化視覺回歸測試（如 Percy、Chromatic）。