这是一篇很纠结的文章，酝酿好久啊，我的执行力。
对于css reset，开始真的没有什么研究，从*{margin:0; padding:0;}到网上的eric css，都是完全的“拿来主义”。看了Reset CSS 研究（八卦篇）很受启发，于是开始了自我折磨的路程。
1.HTML元素的认识
css reset的目的&意义
第一步是清除浏览器的默认样式，第二步是重设浏览器的默认样式。
那么应该先了解HTML元素在各个浏览器下的表现吧。于是写了一个Html4，其中主要是使用html4的基本元素。之前转过[转]HTML4默认样式，这是w3c组织给出html4的样式建议，各个浏览器对这个样式的解释还是存在差异。通过Html4，就可以比较清楚的发现其中的差异。
例如，IE6下abbr没有提示；FF, IE下a中的图片有边框，Op, Sa, Ch则没有；FF, IE, Ch下form元素的表现是基于用户的Window主题，而Op,Sa则依然按照自己的渲染法则。奇怪的是，Ch也是用Sa的浏览器引擎，居然同Sa表现不同（BTW,Ch只有JS引擎是新的。）。不解！
2.各个css reset
主要分析参考了eric-reset, yui-reset, kissy-reset。
(1. table的重置
各个reset对于table的重置比较一致：
table {
border-collapse: collapse;
border-spacing: 0;
}
经过测试发现，border-spacing对于IE6,IE7来说是没有效果的，而且通过border-collapse: collapse; 就可以达到效果，为什么要写后一句呢？在eric-reset中eric强调了tables still need ‘cellspacing=”0″‘ in the markup ，也不解为什么。
(2. q的重置
eric-reset版本:
blockquote:before, blockquote:after,
q:before, q:after {content: ''; content: none;}
但是在测试页面中blockquote在各个浏览器中都没有出现引号，没有必要进行重置，对于q为什么要设置两次content属性呢, content:none只对FF和IE8有效，对Op, Sa, Ch没有效果，而且content:”"已经可以完全应付了。所以采用了yui-reset和kissy-reset的版本：
q:before, q:after{content:'';}
对q进行重设是很有必要的，IE6, IE7没有引号，而且当q嵌套q时，各个浏览器格式千奇百怪。
我觉得FF, IE8表现的最合理。在引号中的引号用单引号表示。
(3. 文本格式元素的重置
strong我觉得还是默认加粗比较好，虽然它所强调的是语义，但也应该在视觉上给人同样的效果。而em去除斜体表现，则是因为斜体在中文字体中视觉效果并不明显。
address,cite,dfn,optgroup,em,var{font-style:normal;}
abbr, acronym(HTML 5不支持acronym)差异性比较大。
不过各个reset对它们的重置还比较统一，
abbr, acronym{border:0; font-variant:normal;}
除了kissy-reset版本，
abbr[title], acronym[title] { border-bottom: 1px dotted; cursor: help;}
kissy的版本在非IE6下的用户体验比较好。用哪种呢？纠结、痛苦……最终还是照顾IE6的心情，它也不容易啊。
这里想展示一下select的表现：
为什么不修正optgroup的斜体呢？因为optgroup的样式在IE下无法重置，即不能改变font-style和font-weight。其中Op中optgroup的背景色是可以重置的，但不能使用background:none除去背景颜色。
对于legend的重置，legend在IE下的字体颜色也很怪异，如果计算机使用的是经典主题，其颜色是黑色；如果XP主题，其颜色是蓝色(#0046D5)。所以统一重置成黑色。
(4. 字体的重置
一些表单元素，yui-reset的版本：
input,button,textarea,select,optgroup,option {
font-family: inherit;
font-size: inherit;
font-style: inherit;
font-weight: inherit;
}
/*@purpose To enable resizing for IE */
/*@branch For IE6-Win, IE7-Win */
input,button,textarea,select {
*font-size: 100%;
}
由于textarea，input和select, button默认无继承性，所以要通过属性指定继承性(inherit)，但IE7以下不识别inherit属性值。yui的写法觉得还是比较繁琐，参考了kissy-reset版本
body,
button, input, select, textarea {font:12px/1.5 Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif;}
“\5b8b\4f53″是“宋体”的unicode 表示，不用“宋体”的正式名“SimSun”, 是据说FF的某些版本和Op不支持SimSun的写法（PS:没有测试）。
设置code, kbd, pre, samp, tt
yui-reset:
pre,code,kbd,samp,tt {
font-family:monospace;
*font-size:108%;
line-height:100%;
}
在IE7下，这些标签里的字体好像是会小一点，不过觉得真的不是很明显（应该不是我心理作用吧），暂时将这点忽略，不想再reset中使用hack。
这是30号字体的效果图，右边的CSS Reset是在code标签中的。code, kbd, pre, samp, tt标签的默认样式是font-family:monospace，
但FF, Op, Ch的好像没有效果啊……傻眼了。所以对这些标签进行了重置。
code, kbd, pre, samp, tt{font-family:"Courier New", Courier, monospace;}
(5. 其他，hr
kissy-reset版本
hr{border:none; height:1px; *color:#fff;}
hr元素很少用，所以很少有reset对它进行重置，貌似淘宝的页面使用了。hr{border:none;}对IE也是没有作用的，其他的属性也不是太了解，所以还是不写这条规则了。
我的css reset，使用了reset的Html4-reset的页面。
/*
Date:09.09.11
Author:ZQP
Email:zhouqiuping@gmail.com
Website:applezqp.com
*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,
pre,code,
form,fieldset,legend,input,button,textarea,
p,blockquote,
th,td{margin:0; padding:0;}
table{border-collapse:collapse; border-spacing:0;}
ul,ol{list-style:none;}
fieldset,img {border:0;}
a{text-decoration:none;}
a:hover{text-decoration:underline;}
q:before, q:after{content:'';}
abbr, acronym{border:0; font-variant:normal;}
address,cite,dfn,optgroup,em,var{font-style:normal;}
legend{color:#000;}
/*typography*/
body, button, input, select, textarea {font:12px/1.5 Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif;}
h1 {font-size:18px;}
h2 {font-size:16px;}
h3 {font-size:14px;}
h4, h5, h6 { font-size:100%; }
code, kbd, pre, samp, tt{font-family:"Courier New", Courier, monospace;}
主要参考
- Reset CSS 研究（八卦篇）
- Reset CSS 研究（技术篇）
- 打造自己的reset.css
非IE6
