CSS 樣式重置 reset：抹平瀏覽器的預設差異

CSS Reset 是指一種將瀏覽器預設的樣式清除或 標準化 的技術，目的是讓不同瀏覽器在渲染網頁時的預設樣式表現一致，避免由於各瀏覽器內建樣式不同而導致的版面錯亂或不一致。

為什麼需要 CSS Reset？

如上方所述，每個瀏覽器都有內建的一套預設樣式。例如：

<h1> 有預設的 font-size 和 margin。
<ul> 和 <ol> 有預設的 padding 和 list-style。
<a> 預設會是藍色並帶有底線。

不同瀏覽器這些預設值可能不同，會導致：

不一致的間距。
不一致的字體大小。
難以控制的元素行為。

透過 CSS Reset，可以清除這些差異，讓開發者在一個乾淨、一致的起點開始設計樣式。

常見的 CSS Reset 方法

Eric Meyer`s Reset

為了解決這樣的困擾，世界知名的 CSS 大師 Eric 整理出一個很棒的解決方法 Reset CSS，做法是把所有瀏覽器最不一致的地方強制歸零，可以看到最一開始那一大串 HTML 標籤的 margin、padding、border、outline 全都設為 0。優點是重置了各個瀏覽器的樣式設定；缺點是必須全部重新做設定，比較沒有彈性。適用於舊版瀏覽器（包含 IE）

MeyerWeb

Normalize.css

由於 Reset CSS 過度地將所有瀏覽器最不一致的地方強制歸零，或是將項目清單強制清除，導致原有的視覺特性都消失了。因此， Nicolas Gallagher 開發出了更精緻的 Reset 方法，不完全清除樣式，而是讓所有瀏覽器的表現一致。

保留有用的瀏覽器預設樣式，避免過度清除。
修正瀏覽器之間常見的樣式差異與錯誤。
改善可用性與易讀性，例如：讓表單元素、標題等在各瀏覽器下都能正常顯示。
透過詳細註解，說明每一段 CSS 的用途。

Normalize

自行定義

自行定義 CSS Reset 的原因主要是為了符合專案的需求，並依開發者的習慣，在不犧牲效能與維護性的情況下，打造一套 剛剛好 的初始樣式設定。

針對專案做 剛好需要 的重置，避免過度重置。
避免冗餘與重複定義，有助於維護和效能。
與 UI 設計系統更一致，可與 UI 設計風格無縫對接。
可以依據專案的實際需求進行擴充與維護。

總結

CSS Reset 是讓您的網頁設計在統一基礎上進行的關鍵第一步。選擇使用 MeyerWeb 還是 Normalize，取決於專案需求、目標瀏覽器、以及設計風格偏好。現代開發中，推薦使用 Normalize.css 或自訂簡化版的 reset 結合 box-sizing: border-box 等實用設定。

一份精簡的現代重置

css

*,
*::before,
*::after {
  box-sizing: border-box;
}

body,
h1, h2, h3, h4,
p, figure, blockquote, dl, dd {
  margin: 0;
}

body {
  min-height: 100vh;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img,
picture,
video,
canvas {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

重點只有幾項：統一盒模型、清掉預設外距、讓媒體元素不撐破版面、讓表單元素繼承字型。

小提醒

重置時別把焦點外框或清單語意一併清掉，那會直接影響鍵盤與輔助工具的使用者。

常見問題

Reset 和 Normalize 有什麼不同？

Reset 把預設樣式全部歸零，一切從頭自己來；Normalize 則是保留合理的預設、只修正各家不一致的地方。現在多數專案採用後者的取向。

一定要用現成的重置樣式嗎？

不一定。現代瀏覽器的差異已經比以前小很多，實務上常見的是自己寫一份精簡的重置，只處理盒模型、外距與媒體元素等關鍵項目。

重置樣式會不會影響無障礙？

會，要小心。把清單符號、按鈕外觀或焦點外框全部清掉時，記得另外補上可辨識的樣式，否則鍵盤與輔助工具的使用者會受影響。

延伸閱讀

CSS 樣式重置 reset：抹平瀏覽器的預設差異 ​

為什麼需要 CSS Reset？ ​

常見的 CSS Reset 方法 ​

Eric Meyer`s Reset ​

Normalize.css ​

自行定義 ​

一份精簡的現代重置 ​

常見問題 ​

延伸閱讀 ​