推荐一份不错的reset.css

【 tulaoshi.com - Web开发 】

时间过得真快，离 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, "5b8b4f53", 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 的差异点：

此外，对整体代码的组织形式做了调整，按照元素的类别将代码进行了分组。

请记住：永远不存在万能解决方案，永远没有银弹。

因此我的建议和 Eric 是一样的：请根据具体需求，适量裁剪和修改后再使用。

比如针对淘宝，可以在 reset.css 的基础上，修改为 .

如果是个人博客，我个人喜欢的一个方案是：.

相关测试页面请查看：.
真实使用时，请用压缩后的版本：.

对于 本身，我们期待它能尽量多的适用于各种场景，但不期待它能解决所有问题。目前而言，reset.css 里的默认样式，是我和正淳等各位同事和朋友们实践经验的总结，算是精挑细选，但不期待能解决所有问题。

最后，期待你的参与和建议。如果这份 reset.css 能有幸在你的项目中得到使用，则非常期待你的反馈。