玉伯和正淳一块儿整理的一份 reset.css: css
1 /* 2 KISSY CSS Reset 3 理念:清除和重置是紧密不可分的 4 特点:1.适应中文 2.基于最新主流浏览器 5 维护:玉伯(lifesinger@gmail.com), 正淳(ragecarrier@gmail.com) 6 */ 7 8 /* 清除内外边距 */ 9 body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */ 10 dl, dt, dd, ul, ol, li, /* list elements 列表元素 */ 11 pre, /* text formatting elements 文本格式元素 */ 12 fieldset, lengend, button, input, textarea, /* form elements 表单元素 */ 13 th, td { /* table elements 表格元素 */ 14 margin: 0; 15 padding: 0; 16 } 17 18 /* 设置默认字体 */ 19 body, 20 button, input, select, textarea { /* for ie */ 21 /*font: 12px/1 Tahoma, Helvetica, Arial, "宋体", sans-serif;*/ 22 font: 12px/1 Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif; /* 用 ascii 字符表示,使得在任何编码下都无问题 */ 23 } 24 25 h1 { font-size: 18px; /* 18px / 12px = 1.5 */ } 26 h2 { font-size: 16px; } 27 h3 { font-size: 14px; } 28 h4, h5, h6 { font-size: 100%; } 29 30 address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */ 31 code, kbd, pre, samp, tt { font-family: "Courier New", Courier, monospace; } /* 统一等宽字体 */ 32 small { font-size: 12px; } /* 小于 12px 的中文很难阅读,让 small 正常化 */ 33 34 /* 重置列表元素 */ 35 ul, ol { list-style: none; } 36 37 /* 重置文本格式元素 */ 38 a { text-decoration: none; } 39 a:hover { text-decoration: underline; } 40 41 abbr[title], acronym[title] { /* 注:1.ie6 不支持 abbr; 2.这里用了属性选择符,ie6 下无效果 */ 42 border-bottom: 1px dotted; 43 cursor: help; 44 } 45 46 q:before, q:after { content: ''; } 47 48 /* 重置表单元素 */ 49 legend { color: #000; } /* for ie6 */ 50 fieldset, img { border: none; } /* img 搭车:让连接里的 img 无边框 */ 51 /* 注:optgroup 没法扶正 */ 52 button, input, select, textarea { 53 font-size: 100%; /* 使得表单元素在 ie 下能继承字体大小 */ 54 } 55 56 /* 重置表格元素 */ 57 table { 58 border-collapse: collapse; 59 border-spacing: 0; 60 } 61 62 /* 重置 hr */ 63 hr { 64 border: none; 65 height: 1px; 66 } 67 68 /* 让非ie浏览器默认也显示垂直滚动条,防止因滚动条引发的闪烁 */ 69 html { overflow-y: scroll; }
测试过的浏览器:IE 6+, Firefox 3.5+, Safari 4+, Chrome 2+, Opera 10+ html
解释一些和 YUI cssreset 的差别点:浏览器
1 清除内外边距的元素,去掉了 div, code(在测试浏览器中,没发现有边距), 增长了 button(感受是 YUI 遗漏了).
2 去掉了 YUI 里对 html 颜色和背景色的设置。在测试浏览器中,没有发现差别。(要设的话,推荐background: transparent)
3 对于 address, caption, …, em, strong 等文本格式元素,作了调整。保留了 strong 和 th 的粗体。
4 对 abbr 和 acronym 作了调整,使得在非 ie6 下可视性更好。
5 去掉了 sup 和 sub 的样式,直接用浏览器默认的便可。
6 对于 input, select, textarea 表单元素,去掉了针对 ie 的 inherit, 只保留了 font-size 的 inherit hack. 由于其它 hack 经测试已失效。
7 增长了一些元素的默认样式。
此外,对总体代码的组织形式作了调整,按照元素的类别将代码进行了分组svn
请记住:永远不存在万能解决方案,永远没有银弹。测试
所以个人建议和 Eric 是同样的:请根据具体需求,适量裁剪和修改后再使用。字体
好比针对淘宝,能够在 reset.css 的基础上,修改成 reset-taobao.css.ui
若是是我的博客,我我的喜欢的一个方案是:reset-blog.css.google
相关测试页面请查看:cssreset svn.
真实使用时,请用压缩后的版本:reset-min.css.编码
对于 reset.css 自己,咱们期待它能尽可能多的适用于各类场景,但不期待它能解决全部问题。目前而言,reset.css 里的默认样式,是玉伯和正淳等各位同事和朋友们实践经验的总结,算是“精挑细选”,但不期待能解决全部问题。spa
最后,期待你的参与和建议。若是这份 reset.css 能有幸在你的项目中获得使用,则很是期待你的反馈。
做者建议:
1.真是项目中能够这样:Reset css +fonts.css /base.css/layout.css.......相结合的方式
2.在reset css中 没用到的元素能够直接拿掉,减小代码量
3.在reset css中作好版本维护信息,方便扩展
最后建议:
网上全部的Reset css 都不是你本身的Reset css ,包括玉伯整理的这个,使用前请深思本文开头的话,量身打造,只选对的,不选"贵"的。
本文转载自http://www.cnblogs.com/yizuierguo/archive/2009/07/15/1524106.html