我最近使用的css reset

是将一个css框架的reset部分精简了一下(其实精简了很多),使用基本无问题

 

/*reset*/
/**
    * @section CSS-Normalisation Module
    */

    /* (en) Global reset of paddings and margins for all HTML elements */
    * { margin:0; padding:0; }

    li { list-style:none;}

    body {
        /* (en) Fix for rounding errors when scaling font sizes in older versions of Opera browser */
        font-size:100%;

        /* (en) Standard values for colors and text alignment */
        background:#fff;
        color:#000;
        text-align:left; /* LTR */
    }

    /* (en) Clear borders for <fieldset> and <img> elements */
    fieldset, img { border:0 solid; }

    table {
        border-collapse: collapse;
        border-spacing: 0;
    }

/*reset end*/

html,body
{
    height:100%;
}

body
{
    font-family:Arial,宋体, 微软雅黑;
}

a
{
    outline:none;
    *blr:expression(this.onFocus=this.blur()); /*去掉a标签的边框(兼容古代浏览器)*/
}

注意“reset end”位置

2013-12-18
现在网上比较流行的观点是说用 * { margin:0; padding:0; } 过于简单,性能消耗大
我本来觉得*的性能问题应该不是很大,且应该由浏览器去解决(既然定义了这个语法,不就是给人用的么),但浏览器的世界比较扭曲,实际上reset的存在本身就是这种扭曲存在的证明,话说如果大家的标准一致,根本不需要reset代码了。另一方面*确实有点一棍子打死所有标签的感觉,好处是有新的标签,不用再加了,坏处是有的标签不需要被reset(此样式对其无意义/此样式对其不太建议),于是网上有一套比较抠细节的方案

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

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;
}

fieldset, img { border:0 solid; }/*自己加的*/



有的人说要打造自己的reset,有的人说高手根本不需要reset,说的都很有道理,但如果你不想陷入浏览器css细节海洋的话,先找一个好的reset,理解它并且适应它,尽可能的用标准的方式使用html和css代码,基本上在各个浏览器上的表现差异不会太大(ie6,7确实需要额外的工作),而这不就是我们的目的所在么,找这方面资料的时候看到过一句话说的很贴切,暂时找不到了,以后补上


posted on 2012-10-26 10:08  jyke123  阅读(180)  评论(0)    收藏  举报