关于CSS的reset问题

以前工作的时候 经常使用这样的代码来reset css

/* CSS globle */
*{margin:0; padding:0;}
ul,ol { list-style:none}
a,img{ border:none}
body{font:12px/1.5 tahoma, '\5b8b\4f53', sans-serif, 'Microsoft YaHei'; }
a{text-decoration:none; outline:none;}
a:hover{text-decoration:underline;}
a:focus{outline:none}
.none{display:none;}
.ht{overflow:hidden; text-indent:-9999px;}
 .c:after{ content:".";display:block;font-size:0;
line-height:0;height:0;clear:both;visibility:hidden;}
.c{display:inline-table;}
/* Hides from IE-mac \*/
* html .c {height: 1%;}
.c{display: block;}
/* End hide from IE-mac */
/* IE7 hack*/
*+html .c {min-height: 1% ;}

后来发现 YUI的css reset 不建议使用*通配。不知道是神马原因?
目前比较流行的有Eric Meyer的重置样式和YUI的重置样式。另有Condensed Meyer Reset简化Eric Meyer的样式。有趣的是,Eric的重置样式也是源于YUI的。而那份简化版又把Eric的样式简化回YUI的样式了 。但同时,糟糕的是,网上流传的比较广的(尤其是国内)都不是最新的版本。上面两个页面里直接看到的都不是最新的,Eric专门为有一个reset.css页面。而YUI当前版本(2.7.0)的reset.css实际地址里,比上面的页面中还多一些东西。此外,我们还可以基于一些常见的框架,比较著名的比如Blueprint或者Elements CSS Framework(这个的reset也是源自于Eric Meyer的)。OK,准备工作就差不多了。以上这些都可以作为参考资料来组织我们自己的reset。我这里主要采用YUI,兼带Eric的reset。
YUI的css reset

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td {
padding: 0;
margin: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
fieldset,img {
border: 0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-weight: normal;
font-style: normal;
}
ol,ul {
list-style: none;
}
caption,th {
text-align: left;
}
h1,h2,h3,h4,h5,h6 {
font-weight: normal;
font-size: 100%;
}
q:before,q:after {
content:'';
}
abbr,acronym { border: 0;
}

Eric Meyer的CSS Reset V2.0|201101内容:

html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6,
p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em,
img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,
dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption,
tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup, menu, nav, output,
ruby, section, summary,time, mark, audio, video {
margin: 0;padding: 0;border: 0;font-size: 100%;
font: inherit;vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, 
header, hgroup, menu, nav, section {display: block;}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after {content: '';content: none;}
table {border-collapse: collapse;border-spacing: 0;}
阅读 3,252 评论 0 阅读全文

发表评论

记录工作生活点滴。

返回
顶部