只要您的客户存在使用不同浏览器(ie,firefox,chrome等)的可能,那你就不得不从完美的理想状态回到现实,因为不同核心的浏览器对CSS的解析效果呈现各异,导致您所期望的效果跟浏览器的“理解”效果有偏差,今天提到的css reset就是用来重置(复位)元素在不同核心浏览器下的默认值,尽量保证元素在不同浏览器下的同一“起跑线”,仅此而已,它不是万能的!在不同核心浏览器下,对于css 属性对某些元素的作用呈现出来的偏差,不是CSS reset所能解决的,它只是解决或部分解决元素的默认初始值问题(约定起跑线而已),至于比赛开始后,运动员们使用什么规则(直线、曲线?),什么步调跑,它就管不着了,至少它们站在同一起跑线上了,鼓掌!
css reset的前世今生请看Reset CSS研究(八卦篇) 玉伯 ,css reset不是一个死的规则,它是根据自己项目,自己的需求来定制的,比如说英文页面和中文页面期望的字体、大小等都不同,很难一概而论,但我们可以参考国内优秀站点的reset(记那些大牌网站的css reset(初始化)样式)然后结合自身的需求进行定制。我个人在工作中也定制了一个。
1: @charset "utf-8";
2: /*参考taobao玉伯的reset,并有删减*/
3:
4: html { overflow-x: hidden; overflow-y: auto; }/*隐藏横向滚动,垂直滚动根据内容自适应(去除IE默认垂直滚动条)*/
5:
6: body, h1, h2, h3, h4, h5, h6, hr, p, blockquote,dl, dt, dd, ul, ol, li,pre,fieldset,
7: lengend, button,select, input, textarea,th, td { /* 清除内外边距 */
8: margin: 0;
9: padding: 0;
10: }
11:
12: body,button, input, select, textarea {/* 设置默认字体 */
13: font: 12px/1 Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif; /*font: 12px/1 Tahoma, Helvetica, Arial, "宋体", sans-serif;*/
14: }
15:
16: h1 { font-size: 18px; }
17: h2 { font-size: 16px; }
18: h3 { font-size: 14px; }
19: h4, h5, h6 { font-size: 100%; }
20:
21: ul, ol { list-style: none; } /* 重置列表元素 */
22:
23: /* 重置文本格式元素 */
24: a {text-decoration:none;}
25: a:hover {text-decoration:none; color:#ff6600;}
26:
27: q:before, q:after { content: ''; }
28:
29: /* 重置表单元素 */
30: legend { color: #000; }
31: fieldset, img { border: none; }
32: button, input, select, textarea {
33: font-size: 100%; /* 使得表单元素在 ie 下能继承字体大小 */
34: }
35:
36: /* 重置表格元素 */
37: table {
38: border-collapse: collapse;
39: border-spacing: 0;
40: }
41:
42: /* 重置 hr */
43: hr {
44: border: none;
45: height: 1px;
46: }
还有一些资源可供参考:
kissy——reset.css
暴风彬彬——目前比较全的CSS重设(reset)方法总结