時(shí)間過(guò)得真快，離 reset css 研究（八卦篇） 已經(jīng) 3 個(gè)多月了。廢話少說(shuō)，趕緊將技術(shù)篇寫完吧。

回顧與反思

第一份 reset css 是 tantek 的 undohtml.css, 很簡(jiǎn)單的代碼，tantek 根據(jù)自己的需要，對(duì)瀏覽器的默認(rèn)樣式進(jìn)行了一些重置。

eric 的也是如此。

yui 除了 cssreset, 還配套有 cssfonts 和 cssbase. cssreset 清除默認(rèn)樣式，cssfonts 和 cssbase 則將一些元素的默認(rèn)樣式重設(shè)回來(lái)。

很長(zhǎng)一段時(shí)間，* { margin: 0; padding: 0; }和 yui cssreset 模糊了我對(duì) reset 的理解，讓我認(rèn)為 reset 就應(yīng)該清除掉所有樣式，將一切歸零。

后來(lái)閱讀 eric 的博客，發(fā)現(xiàn) eric 并不期望大家下載他的 reset.css 后直接拿去用。而是期待能根據(jù)具體需求，適量裁剪和修改后再使用。

世間的事總會(huì)有些戲劇化，eric 的期待沒(méi)有如意。大家都想得到通用解決方案，期待銀彈。在這種渴求下，yui cssreset 很徹底很干凈，廣為流傳。

更戲劇化的是，由于 yui 的 cssfonts 和 cssbase 只考慮了西歐文字，對(duì)漢字的考慮不多。這導(dǎo)致國(guó)內(nèi)用戶大部分只會(huì)用 cssreset. 比喻成武林秘籍的話，我們一直在用殘卷。

調(diào)節(jié)顯示器，有一個(gè)“重置為出廠設(shè)置”的選項(xiàng)。這有兩重含義：一是去掉當(dāng)前的設(shè)置，二是還原為出廠時(shí)的設(shè)置。css reset 也一樣，第一步是清除瀏覽器的默認(rèn)樣式，第二步是重設(shè)瀏覽器的默認(rèn)樣式。很明顯，* { margin: 0; padding: 0; }和 yui cssreset 偏向于第一步。

這兩步并不是截然分開(kāi)的。reset 的初始意圖，是想減少各種瀏覽器下默認(rèn)樣式的差異。對(duì)于沒(méi)有差異的默認(rèn)樣式，則可以根據(jù)情況，選擇性重置或不重置。比如 strong, 默認(rèn)都是粗體，這符合預(yù)期，就可以不重置。又比如 a, 現(xiàn)在的主流瀏覽器下默認(rèn)樣式無(wú)差別，但為了某些因素，比如可讀性，也會(huì)考慮將下劃線重置為無(wú)。

以上，是回顧，是反思，是接下來(lái)技術(shù)實(shí)現(xiàn)的指導(dǎo)思想。

技術(shù)實(shí)現(xiàn)

天下一大抄，抄來(lái)抄去，種種 reset 代碼，長(zhǎng)得都差不離。這沒(méi)什么不好，不光解決了問(wèn)題，還促進(jìn)了技術(shù)傳播。

但從 2004 年到現(xiàn)在，已經(jīng)一晃眼 5 年了。曾經(jīng)的一些考慮，比如針對(duì) ie 5.5 的代碼，目前已經(jīng)可以大膽舍棄了。抄的過(guò)程中，努力去做到求實(shí)求證，努力求一份自己的理解，很難很難。但只要孜孜不倦，終究會(huì)有所獲，有所得，有所悟。

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

/*kissy css reset理念：清除和重置是緊密不可分的特色：1.適應(yīng)中文 2.基于最新主流瀏覽器*//* 清除內(nèi)外邊距 */body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 結(jié)構(gòu)元素 */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;}/* 設(shè)置默認(rèn)字體 */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 字符表示，使得在任何編碼下都無(wú)問(wèn)題 */}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; } /* 統(tǒng)一等寬字體 */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 下無(wú)效果 */	border-bottom: 1px dotted;	cursor: help;}q:before, q:after { content: ''; }/* 重置表單元素 */legend { color: #000; } /* for ie6 */fieldset, img { border: none; } /* img 搭車：讓鏈接里的 img 無(wú)邊框 *//* 注：optgroup 無(wú)法扶正 */button, input, select, textarea {    font-size: 100%; /* 使得表單元素在 ie 下能繼承字體大小 */}/* 重置表格元素 */table {	border-collapse: collapse;	border-spacing: 0;}/* 重置 hr */hr {    border: none;    height: 1px;}/* 讓非ie瀏覽器默認(rèn)也顯示垂直滾動(dòng)條，防止因滾動(dòng)條引起的閃爍 */html { overflow-y: scroll; }

用途在注釋里都標(biāo)明了，就不多解釋。測(cè)試頁(yè)面在這里：css reset test. 這份測(cè)試頁(yè)面花了我們很大心血，如果轉(zhuǎn)載，請(qǐng)注明下出處，呵呵。

先說(shuō)明下測(cè)試過(guò)的瀏覽器：ie 6+, firefox 3.5+, safari 4+, chrome 2+, opera 10+

下面解釋一些和 yui cssreset 的差異點(diǎn)：

1. 清除內(nèi)外邊距的元素，去掉了 div, code（在測(cè)試瀏覽器中，沒(méi)發(fā)現(xiàn)有邊距）, 增加了 button（感覺(jué)是 yui 遺漏了）.
2. 去掉了 yui 里對(duì) html 顏色和背景色的設(shè)置。在測(cè)試瀏覽器中，沒(méi)有發(fā)現(xiàn)差異。（要設(shè)的話，推薦background: transparent）
3. 對(duì)于 address, caption, …, em, strong 等文本格式元素，做了調(diào)整。保留了 strong 和 th 的粗體。
4. 對(duì) abbr 和 acronym 做了調(diào)整，使得在非 ie6 下可視性更好。
5. 去掉了 sup 和 sub 的樣式，直接用瀏覽器默認(rèn)的即可。
6. 對(duì)于 input, select, textarea 表單元素，去掉了針對(duì) ie 的 inherit, 只保留了 font-size 的 inherit hack. 因?yàn)槠渌?hack 經(jīng)測(cè)試已失效。
7. 增加了一些元素的默認(rèn)樣式。

此外，對(duì)整體代碼的組織形式做了調(diào)整，按照元素的類別將代碼進(jìn)行了分組。

如何使用

請(qǐng)記住：永遠(yuǎn)不存在萬(wàn)能解決方案，永遠(yuǎn)沒(méi)有銀彈。

因此我的建議和 eric 是一樣的：請(qǐng)根據(jù)具體需求，適量裁剪和修改后再使用。

比如針對(duì)淘寶，可以在 reset.css 的基礎(chǔ)上，修改為 reset-taobao.css.

如果是個(gè)人博客，我個(gè)人喜歡的一個(gè)方案是：reset-blog.css.

相關(guān)測(cè)試頁(yè)面請(qǐng)查看：cssreset svn.
真實(shí)使用時(shí)，請(qǐng)用壓縮后的版本：reset-min.css.

對(duì)于 reset.css 本身，我們期待它能盡量多的適用于各種場(chǎng)景，但不期待它能解決所有問(wèn)題。目前而言，reset.css 里的默認(rèn)樣式，是我和正淳等各位同事和朋友們實(shí)踐經(jīng)驗(yàn)的總結(jié)，算是“精挑細(xì)選”，但不期待能解決所有問(wèn)題。

最后，期待你的參與和建議。如果這份 reset.css 能有幸在你的項(xiàng)目中得到使用，則非常期待你的反饋。