各大网站css reset技术（css重置）比较与总结

css reset技术一直是前端开发中一个热门的话题。通过这一技术，可以有效地解决html技术在创立之初的不足之处。下面通过几个例子比较一下国内各大门户网站所采用的css reset方案。

新浪

body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div{margin:0;padding:0;border:0;}
body{background:#fff;color:#333;font-size:12px; margin-top:5px;font-family:”SimSun”,”宋体”,”Arial Narrow”;}

ul,ol{list-style-type:none;}
select,input,img,select{vertical-align:middle;}

a{text-decoration:none;}
a:link{color:#009;}
a:visited{color:#800080;}
a:hover,a:active,a:focus{color:#c00;text-decoration:underline;}

腾讯

body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0}
body{font:12px “宋体”,”Arial Narrow”,HELVETICA;background:#fff;-webkit-text-size-adjust:100%;}
a{color:#2d374b;text-decoration:none}
a:hover{color:#cd0200;text-decoration:underline}
em{font-style:normal}
li{list-style:none}
img{border:0;vertical-align:middle}
table{border-collapse:collapse;border-spacing:0}
p{word-wrap:break-word}
input{-webkit-appearance:none;}
.undis{display:none}
.dis{display:block}
.ind{text-indent:2em}
.ind10{text-indent:10px;}
.noborder{border:0;}
.Q-red a,a.Q-red{color:#bd0a01!important}
.Q-black a,a.Q-black{color:#000!important}
.Q-bold{font-weight:bold!important}
.layout:after,.hd:after,.bd:after,.ft:after,.cf:after,.Q-tList:after,.Q-tList ul:after,.Q-tList ol:after,.Q-pList:after,.Q-pList ul:after,.Q-tpList:after,.Q-tpList ul:after,.Q-tpWrap:after{content:””;display:table;clear:both}
.layout,.hd,.bd,.ft,.cf,.Q-tList,.Q-tList ul,.Q-tList ol,.Q-pList,.Q-pList ul,.Q-tpList,.Q-tpList ul,.Q-tpWrap{*zoom:1}
@media screen{
.fl,.layout .fl,.chief{float:left;display:inline}
.fr,.layout .fr,.extra{float:right;display:inline}
.fn{font-weight:normal;}
.layout{width:1000px;margin:0 auto}
.leftArea{width:660px;float:left;}
.rightArea{width:318px;border:1px solid #d2e1f1;background:#fff;float:right;}
.mt8{margin-top:8px}
.mt12{margin-top:12px}
.mt15{margin-top:15px}
.mb10{margin-bottom:10px}

网易

html {overflow-y:scroll;}
body {margin:0; padding:45px 0 0; font:12px/1.5 \5b8b\4f53,Arial,sans-serif;background:#ffffff;}
div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,blockquote,p{padding:0; margin:0;}
table,td,tr,th{font-size:12px;}
ol,ul {list-style:none;}
li{list-style-type:none;}
img{vertical-align:top;border:0;}
h1,h2,h3,h4,h5,h6{font-size:inherit; font-weight:normal;}
address,cite,code,em,th,i{font-weight:normal; font-style:normal;}
.hx a,.hx em,.fB{font-weight:bold;}
.clearfix{*zoom:1;}
.clearfix:after{display:block; overflow:hidden; clear:both; height:0; visibility:hidden; content:”.”;}
a {color:#252525; text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {color:#ba2636;text-decoration:underline;}
a:active {color:#ba2636;}

搜狐

/* 全局CSS定义 */
body{font-family:’宋体’;text-align:center;margin:0 auto;padding:0;background:#FFF;font-size:12px;color:#333;}
body > div{text-align:center;margin-right:auto;margin-left:auto;}
div,form,ul,ol,li,span,p{margin:0;padding:0;border:0;}
img,a img{border:0;margin:0;padding:0;}
h1,h2,h3,h4,h5,h6{margin:0;padding:0;font-size:12px;font-weight:normal;}
ul,ol,li{list-style:none}
table,td,input{font-size:12px;padding:0}
/* 默认链接颜色 */
a{outline-style:none;color:#333;text-decoration:none}
a:hover{color:#c00;text-decoration:underline;}

/*清除链接虚框*/
/*a,area {blr:expression(this.onFocus=this.blur()) } for IE
:focus {-moz-outline-style: none; } for Firefox
*/

/* 列表属性 */
.list12 UL{width:100%;margin:0px auto;_margin /* IE5.5 */:0;}
.list12 li,.list12 p{color:#039;line-height:20px;font-size:12px;text-align:left;_margin-left /* IE5.5 */:-16px;}
.list12 li a,.list12 p a{color:#039;text-decoration:underline;}
.list12 li a:hover,.list12 p a:hover{color:#c00}
.list12 li img {margin-right:2px;}

.list14 UL{width:100%;margin:0px auto;_margin /* IE5.5 */:0;}
.list14 li,.list14 p{color:#039;line-height:24px;font-size:14px;text-align:left;_margin-left /* IE5.5 */:-16px;}
.list14 li a,.list14 p a{color:#039;text-decoration:underline;}
.list14 li a:hover,.list14 p a:hover{color:#c00}
.list14 li img {margin-right:2px;}

/* 图混 */
.PTGA{margin:10px auto;}
.PTGA .picL{width:100px;float:left;}
.PTGA .picL img{border:1px #EDEDED solid;}
.PTGA .picL span{background:#EDEDED;float:left;width:100px;line-height:22px;margin-top:1px;}
.PTGA .picL a{color:#333;}
.PTGA .picL a:hover{color:#c00;}
.PTGA .list12{_width /*IE5.5*/:auto;margin:6px auto 0;float:right;}
.PTGA .list14{_width /*IE5.5*/:auto;margin:0 auto;float:right;}

/* 颜色 */
.red,.red a{color:#c00!important;text-decoration:none;}
.red a:hover{color:#c00!important;text-decoration:underline;}
.blue,.blue a{color:#173ee8!important;text-decoration:none}
.blue a:hover{color:#173ee8!important;text-decoration:underline}
.black,.black a{color:#000!important;text-decoration:none}
.black a:hover{color:#000!important;text-decoration:underline}
.white{background:#fff;}

/* 列表标红标黑链接 */
.list14 li span.red-n{color:#c00;text-decoration:none;}
.list14 li span.black-n{color:#000;text-decoration:none;}
.list14 li span.blue-n{color:#173ee8;text-decoration:none;}
.list14 li span.red{color:#c00;text-decoration:underline;}
.list14 li span.black{color:#000;text-decoration:underline;}
.list14 li span.blue{color:#173ee8;text-decoration:underline;}

.list12 li span.red-n{color:#c00;}
.list12 li span.black-n{color:#000;}
.list12 li span.blue-n{color:#173ee8;}
.list12 li span.red{color:#c00;text-decoration:underline;}
.list12 li span.black{color:#000;text-decoration:underline;}
.list12 li span.blue{color:#173ee8;text-decoration:underline;}

/* 下划线 */
.unline,.unline a{text-decoration:underline}
.nounline,.nounline a,.list12 .nounline{text-decoration:none}

/* 通用属性 */
.left{float:left;}
.right{float:right;}

.clear{clear:both;font-size:1px;width:1px;height:0;visibility:hidden;margin-top:0px!important;*margin-top:-1px;line-height:0}/*ie and firefox1.5 updata */

/*文字对齐方式*/
.txtLeft{text-align:left}
.txtRight{text-align:right}
.txtCenter{text-align:center}

/*常用方法*/
.show{display:block}
.hidden{display:none}
.hand{cursor:pointer;}
.fontArial{font-family:’Arial’;}
.b{font-weight:bold;}

——————————————————————————————

新浪的css reset比较中规中矩，特色是设置了默认背景颜色和字体等body属性，这样可以预防有些用户采用自定义预设时显示的错乱。在第一句中，html默认带多余border边框的只有img属性，也可以单独为img属性设置border:0

腾讯的css reset亮点对a属性的处理以及margin、border、display的预设。由于默认的a属性不点时有下划线，而点击时无下划线，比较变扭，一般通过css reset将其调整为不点时无下划线，点击时有下划线，这样的UX设计会更好一些。预设的边距、显示等属性在大型web开发中应用很广泛，方便在class中调用。

网易的css reset中添加了clearfix。这是用来清除页面浮动的，比较推荐。当然也有说可以使用aotoflow:hidden和clear:both，但通过设置一个统一的clearfix，在各浏览器下兼容性更好一些。

搜狐的css reset比较清晰，一个个模块组成，而且有明晰的中文注释。

此外，推荐YUI的css reset，比较清晰简明。代码如下：