推薦一份不錯的reset.css

DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS進階教程 >> 推薦一份不錯的reset.css

推薦一份不錯的reset.css

編輯：CSS進階教程

網頁制作poluoluo文章簡介：但從 2004 年到現在，已經一晃眼 5 年了。曾經的一些考慮，比如針對 ie 5.5 的代碼，目前已經可以大膽捨棄了。抄的過程中，努力去做到求實求證，努力求一份自己的理解，很難很難。但只要孜孜不倦，終究會有所獲，有所得，有所悟。

時間過得真快，離 Reset CSS 研究（八卦篇）已經 3 個多月了。廢話少說，趕緊將技術篇寫完吧。

回顧與反思

第一份 reset css 是 Tantek 的 undohtml.css, 很簡單的代碼，Tantek 根據自己的需要，對浏覽器的默認樣式進行了一些重置。

Eric 的也是如此。

YUI 除了 cssreset, 還配套有 cssfonts 和 cssbase. cssreset 清除默認樣式，cssfonts 和 cssbase 則將一些元素的默認樣式重設回來。

很長一段時間，* { margin: 0; padding: 0; }和 YUI cssreset 模糊了我對 reset 的理解，讓我認為 reset 就應該清除掉所有樣式，將一切歸零。

後來閱讀 Eric 的博客，發現 Eric 並不期望大家下載他的 reset.css 後直接拿去用。而是期待能根據具體需求，適量裁剪和修改後再使用。

世間的事總會有些戲劇化，Eric 的期待沒有如意。大家都想得到通用解決方案，期待銀彈。在這種渴求下，YUI cssreset 很徹底很干淨，廣為流傳。

更戲劇化的是，由於 YUI 的 cssfonts 和 cssbase 只考慮了西歐文字，對漢字的考慮不多。這導致國內用戶大部分只會用 cssreset. 比喻成武林秘籍的話，我們一直在用殘卷。

調節顯示器，有一個“重置為出廠設置”的選項。這有兩重含義：一是去掉當前的設置，二是還原為出廠時的設置。CSS Reset 也一樣，第一步是清除浏覽器的默認樣式，第二步是重設浏覽器的默認樣式。很明顯，* { margin: 0; padding: 0; }和 YUI cssreset 偏向於第一步。

這兩步並不是截然分開的。reset 的初始意圖，是想減少各種浏覽器下默認樣式的差異。對於沒有差異的默認樣式，則可以根據情況，選擇性重置或不重置。比如 strong, 默認都是粗體，這符合預期，就可以不重置。又比如 a, 現在的主流浏覽器下默認樣式無差別，但為了某些因素，比如可讀性，也會考慮將下劃線重置為無。

以上，是回顧，是反思，是接下來技術實現的指導思想。

技術實現

天下一大抄，抄來抄去，種種 reset 代碼，長得都差不離。這沒什麼不好，不光解決了問題，還促進了技術傳播。

但從 2004 年到現在，已經一晃眼 5 年了。曾經的一些考慮，比如針對 ie 5.5 的代碼，目前已經可以大膽捨棄了。抄的過程中，努力去做到求實求證，努力求一份自己的理解，很難很難。但只要孜孜不倦，終究會有所獲，有所得，有所悟。

這是我和好友正淳一起整理的一份 reset.css:

/*
KISSY CSS Reset
理念：清除和重置是緊密不可分的
特色：1.適應中文 2.基於最新主流浏覽器
*/
/* 清除內外邊距 */
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 結構元素 */
dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
pre, /* text formatting elements 文本格式元素 */
fieldset, lengend, button, input, textarea, /* form elements 表單元素 */
th, td { /* table elements 表格元素 */
    margin: 0;
    padding: 0;
}

/* 設置默認字體 */
body,
button, input, select, textarea { /* for ie */
    /*font: 12px/1 Tahoma, Helvetica, Arial, "宋體", sans-serif;*/
    font: 12px/1 Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif; /* 用 ascii 字符表示，使得在任何編碼下都無問題 */
}

h1 { font-size: 18px; /* 18px / 12px = 1.5 */ }
h2 { font-size: 16px; }
h3 { font-size: 14px; }
h4, h5, h6 { font-size: 100%; }

address, cite, dfn, em, var { font-style: normal; } /* 將斜體扶正 */
code, kbd, pre, samp, tt { font-family: "Courier New", Courier, monospace; } /* 統一等寬字體 */
small { font-size: 12px; } /* 小於 12px 的中文很難閱讀，讓 small 正常化 */

/* 重置列表元素 */
ul, ol { list-style: none; }

/* 重置文本格式元素 */
a { text-decoration: none; }
a:hover { text-decoration: underline; }

abbr[title], acronym[title] { /* 注：1.ie6 不支持 abbr; 2.這裡用了屬性選擇符，ie6 下無效果 */
	border-bottom: 1px dotted;
	cursor: help;
}

q:before, q:after { content: ''; }

/* 重置表單元素 */
legend { color: #000; } /* for ie6 */
fieldset, img { border: none; } /* img 搭車：讓鏈接裡的 img 無邊框 */
/* 注：optgroup 無法扶正 */
button, input, select, textarea {
    font-size: 100%; /* 使得表單元素在 ie 下能繼承字體大小 */
}

/* 重置表格元素 */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* 重置 hr */
hr {
    border: none;
    height: 1px;
}

/* 讓非ie浏覽器默認也顯示垂直滾動條，防止因滾動條引起的閃爍 */
html { overflow-y: scroll; }

用途在注釋裡都標明了，就不多解釋。測試頁面在這裡：CSS Reset Test. 這份測試頁面花了我們很大心血，如果轉載，請注明下出處，呵呵。

先說明下測試過的浏覽器：IE 6+, Firefox 3.5+, Safari 4+, Chrome 2+, Opera 10+

下面解釋一些和 YUI cssreset 的差異點：

清除內外邊距的元素，去掉了 div, code（在測試浏覽器中，沒發現有邊距）, 增加了 button（感覺是 YUI 遺漏了）.
去掉了 YUI 裡對 html 顏色和背景色的設置。在測試浏覽器中，沒有發現差異。（要設的話，推薦background: transparent）
對於 address, caption, …, em, strong 等文本格式元素，做了調整。保留了 strong 和 th 的粗體。
對 abbr 和 acronym 做了調整，使得在非 ie6 下可視性更好。
去掉了 sup 和 sub 的樣式，直接用浏覽器默認的即可。
對於 input, select, textarea 表單元素，去掉了針對 ie 的 inherit, 只保留了 font-size 的 inherit hack. 因為其它 hack 經測試已失效。
增加了一些元素的默認樣式。

此外，對整體代碼的組織形式做了調整，按照元素的類別將代碼進行了分組。