正如 javascript 兼容库的作用， css reset 也扮演着类似的角色，css reset 保证了各个浏览器最基本元素渲染的一致性和统一性 ，从而减少在构建复杂界面过程中遇到各个浏览器出现不同展现的问题。以前对于 css 框架关注比较少，而近来随着 bootstrap 以及 lesscss 等的出现，使得构建 css 框架也开始成为一种必要。那么先从 css reset 开始吧。
css reset 从最早的
* {margin:0;padding:0;}
到简单实用的 YUI cssreset ，再到目前流行的 normalize.css . 趋势是越来来细化，越来越尊重浏览器自带的默认样式 ，而不是简单得完全重置掉，例如 ul (padding margin list-type), strong (font-weight), h1~h6(font-size)。这次综合参考 normalize.css , bootstrap , KISSY cssreset ，在构建新的 css reset 时也遇到了不少浏览器差异问题，值得记录。
注：构建过程采用 lesscss
构建过程
html5 元素
目前老版本 ie 通过 html5shim 等也可以使用 html5 标签，但是一个问题就是虽然可以使用，但是新标签没有样式，那么就需要对 html5 的标签重新定义样式，例如：
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section,
summary {
display: block;
}
audio,
canvas,
video {
.ks-inline-block_();
}
mark {
background: #ff0;
color: #000;
}
figure {
margin: 1em 40px 1em 40px;
}
其中 mark figure 参照 chrome 的自带样式，尊重浏览器的默认样式.
mark reset 前
mark reset 后
figure reset 前
figure reset 后
而其中 audio 元素在不同浏览器渲染也有差异，当 audio 不带 controls 属性时，除了 ios safari 其他浏览器 width/height 都是 0，那么这时需要显示设置下
audio:not([controls]) {
height: 0;
width:0;
}
可以使用 ios safari 访问以下链接：
audio reset 前
audio reset 后
基本字体与大小
默认字体大小一般是 16px，过大，一般设置为12px。
默认字体在中文环境下，chrome 为 simsun 而其他浏览器为 new times，推荐统一为 tahoma, arial, simsun, sans-serif;
页面背景色除了 chrome 外用 js 获取都是 transparent，为了一致性，简单设置为 #fff 即可，字体颜色也对应白色统一为 #222.
line-height 默认比较诡异，firefox 大概为 1.3，其他大概为 1.13，统一为 1.5 即可.
body margin 默认情况下 ie8- 为 10px，而其他浏览器为 8px，一般 body 不需要 margin，设置为 0 比较好.
input/button 等表单控件比较特殊，默认情况不继承父元素的 font-family 以及 font-size，需要手动设置表单控件的 font-family 为页面字体，font-size 为 100% 继承父元素大小.
form 控件 reset 前
form 控件 reset 后
ios safari 中 从 portrait 转到 landscape 会导致字体大小调整，通过设置 text-size-adjust 可防止调整（现实为仍然少量调整，双击恢复正常）
例如：
html {
font-size: @baseFontSize; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
}
html,
button,
input,
select,
textarea {
font-family: @baseFontFamily;/* 1 */
}
button,
input,
select,
textarea {
font-size: 100%;
}
body {
margin: 0;/* 1 */
color: @textColor;
background-color: @bodyBackground; /* 2 */
line-height: @baseLineHeight; /* 3 */
}
链接
链接色一般来说应该设置一个统一的颜色，为了美观取消下划线，以及 hover active 时的虚线框，但是为了可访问性，需要保留聚焦时的虚线框，需要注意的是 chrome 聚焦是比较突兀的黄线框，需要统一设置为和其他浏览器一样的细虚线框
link reset 前
link reset 后
例如：
a {
color: @linkColor;
text-decoration: none;
&:focus {
outline: thin dotted;
}
&:active,
&:hover {
outline: 0;
}
&:hover {
color: @linkColorHover;
}
}
其他元素字体与排版
h1,h2 等在标准浏览器字体相对父元素有变化，而在 ie67 中则是固定的大小，并且 margin 边距也不一样，则需要在 reset 中手动指明下
h1,h2 reset 前
h1,h2 reset 后
例如:
h1 {
font-size: 2em;
margin: 0.67em 0;
}
h2 {
font-size: 1.5em;
margin: 0.83em 0;
}
abbr 当有 title 属性时，在 ie789 以及 chrome 底部没有虚线
abbr reset 前
abbr reset 后
需要手动加上虚线（ie6 不支持）
abbr[title] {
border-bottom: 1px dotted;
}
b strong 在 firefox 以及 ie89 下默认为 bolder 样式
strong reset 前
strong reset 后
最好设置为 bold
b,strong {
font-weight: bold;
}
blockquote 在 ie67 下上边距为 0， 而其他浏览器都为 1em
blockquote reset 前
blockquote reset 后
blockquote {
margin: 1em 40px;
}
dfn 在 safari5 下不为斜体
dfn before reset
dfn after reset
dfn {
font-style: italic;
}
p,pre 在 ie67 下外边距为 0，其他浏览器则为 1em
p before reset
p after reset
p,
pre {
margin: 1em 0;
}
code/pre/samp 和 form 控件类似，不继承父元素字体和大小，需要给与合适的字体
code before reset
code after reset
code,
kbd,
pre,
samp {
font-family: monospace, serif; /* 1 */
font-size: 1em; /* 2 */
}
pre 默认不会自动换行，加上自动换行比较好，而 ie 需要不同的属性
pre before reset
pre after reset
pre {
white-space: pre;
white-space: pre-wrap;
/*ie*/
word-wrap: break-word;
}
q 元素 ie67 下两边不支持双引号，为了一致性，需要在其他浏览器中取出双引号
q before reset
q after reset
q {
quotes: none;
}
q:before,
q:after {
content: '';
content: none;
}
small 同 h1， 在 ie67 下相对大小错误
small before reset
small after reset
small {
font-size: 75%;
}
sup/sub 默认情况下除了 firefox 都会影响当前行的行高，可使用其他的方法避免
sub before reset
sub after reset
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
列表
ul/li/dd 在 ie6,7 下外边距和内边距错乱
ul before reset
ul after reset
dl,
menu,
ol,
ul {
margin: 1em 0;
}
dd {
margin: 0 0 0 40px;
}
menu,
ol,
ul {
padding: 0 0 0 40px;
}
img/svg
ie 当 img 在链接内时会导致出现边框
img before reset
img after reset
img {
border: 0;
}
ie9 中内嵌的 svg 不是默认 overflow hidden，导致包含的元素会超过 svg 元素区域
svg before reset
svg after reset
svg:not(:root) {
overflow: hidden;
}
表单元素
form 外边在 ie789 获取为 auto，实际应为 0
form before reset
form after reset
form {
margin: 0;
}
fieldset 各个浏览器存在差异
fieldset before reset
fieldset after reset
可统一为 chrome 内置样式
fieldset {
border: 2px groove #f0f0f0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
legend ie 存在差异
legend before reset
legeng after reset
可手动处理
legend {
border: 0; /* 1 */
margin:0;
padding: 0;
white-space: normal; /* 2 */
*margin-left: -7px; /* 3 */
}
form 控件一系列问题： textarea 在 ie 下默认存在滚动条，button/input 各个浏览器 margin 不一致， ie button 左右无内边距, firefox button 默认带有内边距
form control before reset
form control after reset
button,
input,
select,
textarea {
margin: 0; /* 2 */
vertical-align: baseline; /* 3 */
*vertical-align: middle; /* 3 */
}
/*
* 1. Removes default vertical scrollbar in IE6/7/8/9.
* 2. Improves readability and alignment in all browsers.
*/
textarea {
overflow: auto; /* 1 */
vertical-align: top; /* 2 */
}
/*
* IE6+ need padding-left/right
*/
button {
padding: 0px 6px;
/* ie6 fix*/
_padding: 0;
}
/*
* Removes inner padding and border in FF3+.
*/
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
checkbox radio 在 ie8,9 下 box-sizing 默认为 content-box 并且 ie 有多余的padding
radio before reset
radio after reset
ie6 无法修复
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box;
padding: 0;
*height: 13px;
*width: 13px;
}
search input 仅 chrome 支持，关键是 chrome 下 box-sizing 为 border-box，其他浏览器都和 text 保持一致为 content-box，目前为了一致性只能禁止 chrome 的表现。
search before reset
search after reset
input[type="search"] {
-webkit-appearance: textfield;
box-sizing: content-box;
}
/*
* Removes inner padding and search cancel button in S5, Chrome.
*/
input[type="search"] {
&::-webkit-search-cancel-button,
&::-webkit-search-decoration {
-webkit-appearance: none;
}
}
表格
统一为更常用的合并边框模型
table before reset
table after reset
table {
border-collapse: collapse;
border-spacing: 0;
}
最终效果
在 normalize.css 对应 demo 的最终效果
New cssreset demo