对比总结YUI-reset.css和Alice-reset.css

　　每每有新项目，第一步就是应当使用一个reset.css来重置样式。滥用不如不用，直接拿个现成的reset.css过来将导致后期各种离奇bug的发生。所以最好还是自己写一个reset.css，并且要明白每一条reset都是用来做什么的。

  1 /* 1.默认色彩 */

  2 /* YUI2 */

  3 html {

  4     /* 不要在reset中设置背景色和字体颜色 */

  5     color: #000;

  6     background: #FFF;

  7 }

  8 

  9 /* 2.边距 */

 10 /* YUI2 */

 11 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 {

 12     margin: 0;

 13     padding: 0;

 14 }

 15 /* Alice */

 16 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,

 17 hr, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {     /* HTML5 */

 18     margin: 0;

 19     padding: 0;

 20 }

 21 

 22 /* 3.边框 */

 23 /* YUI2 and Alice */

 24 fieldset, img {    /* 去除默认边框 */

 25     border: 0;

 26 }

 27 abbr, acronym {    /* 去掉 Firefox/Safari下此元素的边框  */

 28     border: 0;

 29     font-variant: normal;

 30 }

 31 

 32 /* 4.外边框(outline) */

 33 /* update - 务必重新定义获取焦点后的样式！ */

 34 /* remember to define focus styles! */

 35 :focus {

 36     outline: 0;

 37 }

 38 

 39 /* 5.字体 */

 40 /* 5.1语义 */

 41 /* YUI2 */

 42 address, caption, cite, code, dfn, em, strong, th, var, optgroup {

 43     font-style: inherit;

 44     font-weight: inherit;

 45 }

 46 /* Alice */

 47 address, caption, cite, code, dfn, em, th, var {

 48     font-style: normal;    /* 可自定义之 */

 49     font-weight: 500;    /* 可自定义之 */

 50 }

 51 

 52 /* 5.2字体 - 标题 */

 53 /* YUI2 */

 54 h1, h2, h3, h4, h5, h6 {

 55     font-size: 100%;

 56     font-weight: normal;

 57 }

 58 /* Alice - 来自yahoo, 让标题都自定义, 适应多个系统应用 */

 59 h1,h2,h3,h4,h5,h6 {

 60     font-size:100%;

 61     font-weight:500;    /* 可自定义之 */

 62 }

 63 

 64 /* 5.3字体 - 表单 */

 65 /* YUI2 */

 66 input, button, textarea, select, optgroup, option {    /* 解决表单元素不继承父级 font的问题，但对IE6/7不起作用 */

 67     font-family: inherit;

 68     font-size: inherit;

 69     font-style: inherit;

 70     font-weight: inherit;

 71 }

 72 input, button, textarea, select {

 73     *font-size: 100%;

 74 }

 75 

 76 /* Alice */

 77 body, button, input, select, textarea {/* 解决表单元素不继承父级 font的问题，直接自定义表单字体以解决兼容性问题 */

 78     font: 12px/1.5 tahoma, arial, \5b8b\4f53;

 79 }

 80 button, input, select, textarea {

 81     font-size: 100%;

 82 }

 83 

 84 /* 6.行高(line-height) */

 85 /* Alice */

 86 body, button, input, select, textarea {     /* 行高默认所有元素都会继承的 */

 87     /* IE6下，行高为1时，中文字顶部会被削掉几像素，字体加粗时尤为明显。切记不要置为1 */

 88     font: 12px/1.5 tahoma, arial, \5b8b\4f53;    

 89 }

 90 

 91 /* 7.列表 */

 92 /* YUI2 */

 93 li {

 94     list-style: none;

 95 }

 96 /* Alice */

 97 /* 去掉列表前的标识, li 会继承 */

 98 ol,ul {

 99     list-style:none;

100 }

101 

102 /* 8.表格 */

103 /* YUI2 and Alice */

104 /* 去掉各Table/cell的边距并让其边重合 */

105 table {

106     border-collapse: collapse;

107     border-spacing: 0;

108 }

109 /* 对齐是排版最重要的因素, 别让什么都居中 */

110 caption, th {

111     text-align: left;

112 }

113 

114 /* 9.上下标 */

115 /* YUI2 */

116 sup, sub {

117     vertical-align: baseline;    /* 建议加上font-size: 100%;让重置更加 */

118 }

119 /* Alice - 统一上标和下标 */

120 sub, sup {     /* 可自定义 */

121     font-size: 75%; line-height: 0; position: relative; vertical-align: baseline;

122 }

123 sup {top: -0.5em;}

124 sub {bottom: -0.25em;}

125 

126 /* 10.插入和删除 */

127 /* YUI2 */

128 del, ins { /* 直接清除了ins的下划线和del的删除线 */

129     text-decoration: none;

130 }

131 /* Alice */

132 /* 默认不显示下划线，保持页面简洁 */

133 ins, a {

134     text-decoration:none;

135 }

136 /* 一致的 del 样式 */

137 del {

138     text-decoration:line-through;

139 }

140 

141 /* 11.引用元素的引号 */

142 /* YUI2 and Alice */

143 q:before, q:after {

144     content: '';

145 }

146 /* Eric - 建议 */

147 blockquote, q {

148     quotes: none;

149 }

150 blockquote:before, blockquote:after,

151 q:before, q:after {

152     content: '';

153     content: none;

154 }

155 

156 /* 12.链接 */

157 /* YUI2与Alice都没有设定 */

158 a {     /* 建议去掉下划线，这种方式过于粗糙 */

159     text-decoration: none;

160 }

161 /* 建议使用这种方式去除链接下划线 */

162 :link, :visited {

163     text-decoration: none;

164 }

165 

166 /* 13.其它 */

167 /* Alice */

168 /* ie6 7 8(q) bug 显示为行内表现 */

169 iframe{

170     display:block;

171 }