在當(dāng)今網(wǎng)頁(yè)設(shè)計(jì)/開(kāi)發(fā)實(shí)踐中，使用CSS來(lái)為語(yǔ)義化的(X)HTML標(biāo)記添加樣式風(fēng)格是重要的關(guān)鍵。在設(shè)計(jì)師們的夢(mèng)想中都存在著這樣的一個(gè)完美世界:所有的瀏覽器都能夠理解和適用多有CSS規(guī)則，并且呈現(xiàn)相同的視覺(jué)效果(沒(méi)有兼容性問(wèn)題)。但是，我們并沒(méi)有生活在這個(gè)完美的世界，現(xiàn)實(shí)中發(fā)生的失竊卻總是恰恰相反，很多CSS樣式在不同的瀏覽器中有著不同的解釋和呈現(xiàn)。

當(dāng)今流行的瀏覽器(如:Firefox、Opera、Internet Explorer、Chrome、Safari等等)中，有一些都是以自己的方式去理解CSS規(guī)范，這就會(huì)導(dǎo)致有的瀏覽器對(duì)CSS的解釋與設(shè)計(jì)師的CSS定義初衷相沖突，使得網(wǎng)頁(yè)的樣子在某些瀏覽器下能正確按照設(shè)計(jì)師的想法顯示，但有些瀏覽器卻并沒(méi)有按照設(shè)計(jì)師想要的樣子顯示出來(lái)，這就導(dǎo)致瀏覽器的兼容性問(wèn)題。更糟的是，有的瀏覽器完全無(wú)視CSS的一些聲明和屬性。

正因?yàn)樯鲜鰶_突和問(wèn)題依然存在于這個(gè)”不完美的世界”，所以一些設(shè)計(jì)師想到了一種避免瀏覽器兼容性問(wèn)題的方法，那就是CSS Reset，什么是CSS Reset？我們可以把它叫做CSS重設(shè)，也有人叫做CSS復(fù)位、默認(rèn)CSS、CSS重置等。CSS重設(shè)就是由于各種瀏覽器解釋CSS樣式的初始值有所不同，導(dǎo)致設(shè)計(jì)師在沒(méi)有定義某個(gè)CSS屬性時(shí)，不同的瀏覽器會(huì)按照自己的默認(rèn)值來(lái)為沒(méi)有定義的樣式賦值，所以我們要先定義好一些CSS樣式，來(lái)讓所有瀏覽器都按照同樣的規(guī)則解釋CSS，這樣就能避免發(fā)生這種問(wèn)題。

一.最簡(jiǎn)化的CSS Reset(重設(shè)) :

CSS Code復(fù)制內(nèi)容到剪貼板

* {

padding: 0;

margin: 0;

}

這是最普遍最簡(jiǎn)單的CSS重設(shè)，將所有元素的padding和margin值都設(shè)為0，可以避免一些瀏覽器在理解這兩個(gè)屬性默認(rèn)值上的”分歧”。

CSS Code復(fù)制內(nèi)容到剪貼板

* {

padding: 0;

margin: 0;

border: 0;

}

這是在上一個(gè)重設(shè)的基礎(chǔ)上添加了對(duì)border屬性的重設(shè)，初始值為0的確能避免一些問(wèn)題。

CSS Code復(fù)制內(nèi)容到剪貼板

* {

outline: 0;

padding: 0;

margin: 0;

border: 0;

}

在前兩個(gè)的基礎(chǔ)上添加了outline屬性的重設(shè)，防止一些沖突。

二.濃縮實(shí)用型CSS Reset(重設(shè)):

CSS Code復(fù)制內(nèi)容到剪貼板

* {

vertical-align: baselinebaseline;

font-weight: inherit;

font-family: inherit;

font-style: inherit;

font-size: 100%;

outline: 0;

padding: 0;

margin: 0;

border: 0;

}

該CSS重設(shè)方法出自Perishable Press，這是他常用的方法。

三.Poor Man 的CSS Reset:

CSS Code復(fù)制內(nèi)容到剪貼板

html, body {

padding: 0;

margin: 0;

}

html {

font-size:1em;

}

body {

font-size:100%;

}

a img, :link img, :visited img {

border:0px;

}

這個(gè)重設(shè)方法將html和body下元素的padding和margin都設(shè)為0，并分別為html標(biāo)簽和body標(biāo)簽下的所有元素設(shè)置了初始的字體大小，最重要的是把有鏈接的圖片的默認(rèn)邊框去掉了。

四.Siolon’s Global Reset

CSS Code復(fù)制內(nèi)容到剪貼板

* {

vertical-align: baselinebaseline;

font-family: inherit;

fo

nt-style: inherit;

font-size: 100%;

border: none;

padding: 0;

margin: 0;

}

body {

padding: 5px;

}

h1, h2, h3, h4, h5, h6, p, pre, blockquote, form, ul, ol, dl {

margin: 20px 0;

}

li, dd, blockquote {

margin-left: 40px;

}

table {

border-collapse: collapse;

border-spacing: 0;

}

五.Shaun Inman’s Global Reset

CSS Code復(fù)制內(nèi)容到剪貼板

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, table, th, td, embed, object {

padding: 0;

margin: 0;

}

table {

border-collapse: collapse;

border-spacing: 0;

}

fieldset, img, abbr {

border: 0;

}

address, caption, cite, code, dfn, em,

h1, h2, h3, h4, h5, h6, strong, th, var {

font-weight: normal;

font-style: normal;

}

ul {

list-style: none;

}

caption, th {

text-align: left;

}

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

font-size: 1.0em;

}

q:before, q:after {

content: ”;

}

a, ins {

text-decoration: none;

}

六.Yahoo(YUI) CSS Reset:

CSS Code復(fù)制內(nèi)容到剪貼板

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’s CSS Reset

CSS Code復(fù)制內(nèi)容到剪貼板

html, body, div, span, applet, object, iframe, table, caption,

tbody, tfoot, thead, tr, th, td, del, dfn, em, font, img, ins,

kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,

h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr,

acronym, address, big, cite, code, dl, dt, dd, ol, ul, li,

fieldset, form, label, legend {

vertical-align: baselinebaseline;

font-family: inherit;

font-weight: inherit;

font-style: inherit;

font-size: 100%;

outline: 0;

padding: 0;

margin: 0;

border: 0;

}

:focus {

outline: 0;

}

body {

background: white;

line-height: 1;

color: black;

}

ol, ul {

list-style: none;

}

table {

border-collapse: separate;

border-spacing: 0;

}

caption, th, td {

font-weight: normal;

text-align: left;

}

blockquote:before, blockquote:after, q:before, q:after {

content: “”;

}

blockquote, q {

quotes: “” “”;

}

八.Condensed Meyer Reset:

CSS Code復(fù)制內(nèi)容到剪貼板

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;

}

fieldset, img {

border: 0;

}

table {

border-collapse: collapse;

border-spacing: 0;

}

ol, ul {

list-style: none;

}

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

font-weight: normal;

font-style: normal;

}

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;

}

九.Ateneu Popular CSS Reset

CSS Code復(fù)制內(nèi)容到剪貼板

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, font, img, ins,

kbd, q, s, samp, small, strike, strong, sub, sup, tt,

var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td {

margin: 0;

padding: 0;

border: 0;

outline: 0;

font-weight: inherit;

font-style: inherit;

font-size: 100%;

font-family: inherit;

vertical-align: baselinebaseline;

}

:focus {

outline: 0;

}

a, a:link, a:visited, a:hover, a:active{

text-decoration:none

}

table {

border-collapse: separate;

border-spacing: 0;

}

th, td {

text-align: left;

font-weight: normal;

}

img, iframe {

border: none;

text-decoration:none;

}

ol, ul {

list-style: none;

}

input, textarea, select, button {

font-size: 100%;

font-family: inherit;

}

select {

margin: inherit;

}

hr {

margin: 0;

padding: 0;

border: 0;

color: #000;

background-color: #000;

height: 1px

}

十.Chris Poteet’s Reset CSS

CSS Code復(fù)制內(nèi)容到剪貼板

* {

vertical-align: baselinebaseline;

font-family: inherit;

font-style: inherit;

font-size: 100%;

border: none;

padding: 0;

margin: 0;

}

body {

padding: 5px;

}

h1, h2, h3, h4, h5, h6, p, pre, blockquote, form, ul, ol, dl {

margin: 20px 0;

}

li, dd, blockquote {

margin-left: 40px;

}

table {

border-collapse: collapse;

border-spacing: 0;

}

十一.Tantek Celik Reset CSS

CSS Code復(fù)制內(nèi)容到剪貼板

:link,:visited { text-decoration:none }

ul,ol { list-style:none }

h1,h2,h3,h4,h5,h6,pre,code { font-size:1em; }

ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input

{ margin:0; padding:0 }

a img,:link img,:visited img { border:none }

address { font-style:normal }

十二.Christian Montoya Reset CSS

CSS Code復(fù)制內(nèi)容到剪貼板

html, body, form, fieldset {

margin: 0;

padding: 0;

font: 100%/120% Verdana, Arial, Helvetica, sans-serif;

}

h1, h2, h3, h4, h5, h6, p, pre,

blockquote, ul, ol, dl, address {

margin: 1em 0;

padding: 0;

}

li, dd, blockquote {

margin-left: 1em;

}

form label {

cursor: pointer;

}

fieldset {

border: none;

}

input, select, textarea {

font-size: 100%;

font-family: inherit;

}

十三.Rudeworks Reset CSS

CSS Code復(fù)制內(nèi)容到剪貼板

* {

margin: 0;

padding: 0;

border: none;

}

html {

font: 62.5% “Lucida Grande”, Lucida, Verdana, sans-serif;

text-shadow: #000 0px 0px 0px;

}

ul {

list-style: none;

list-style-type: none;

}

h1, h2, h3, h4, h5, h6, p, pre,

blockquote, ul, ol, dl, address {

font-weight: normal;

margin: 0 0 1em 0;

}

cite, em, dfn {

font-style: italic;

}

sup {

position: relative;

bottombottom: 0.3em;

vertical-align: baselinebaseline;

}

sub {

position: relative;

bottombottom: -0.2em;

vertical-align: baselinebaseline;

}

li, dd, blockquote {

margin-left: 1em;

}

code, kbd, samp, pre, tt, var, input[type='text'], textarea {

font-size: 100%;

font-family: monaco, “Lucida Console”, courier, mono-space;

}

del {

text-decoration: line-through;

}

ins, dfn {

border-bottom: 1px solid #ccc;

}

small, sup, sub {

font-size: 85%;

}

abbr, acronym {

text-transform: uppercase;

font-size: 85%;

letter-spacing: .1em;

border-bottom-style: dotted;

border-bottom-width: 1px;

}

a abbr, a acronym {

border: none;

}

sup {

vertical-align: super;

}

sub {

vertical-align: sub;

}

h1 {

font-size: 2em;

}

h2 {

font-size: 1.8em;

}

h3 {

font-size: 1.6em;

}

h4 {

font-size: 1.4em;

}

h5 {

font-size: 1.2em;

}

h6 {

font-size: 1em;

}

a, a:link, a:visited, a:hover, a:active {

outline: 0;

text-decoration: none;

}

a img {

border: none;

text-decoration: none;

}

img {

border: none;

text-decoration: none;

}

label, button {

cursor: pointer;

}

input:focus, select:focus, textarea:focus {

background-color: #FFF;

}

fieldset {

border: none;

}

.clear {

clear: both;

}

.float-left {

float: left;

}

.float-rightright {

float: rightright;

}

body {

text-align: center;

}

#wrapper {

margin: 0 auto;

text-align: left;

}

十四. Anieto2K Reset CSS

CSS Code復(fù)制內(nèi)容到剪貼板

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, font, img,

ins, kbd, q, s, samp, small, strike,

strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td,

center, u, b, i {

margin: 0;

padding: 0;

border: 0;

outline: 0;

font-weight: normal;

font-style: normal;

font-size: 100%;

font-family: inherit;

vertical-align: baselinebaseline

}

body {

line-height: 1

}

:focus {

outline: 0

}

ol, ul {

list-style: none

}

table {

border-collapse: collapse;

border-spacing: 0

}

blockquote:before, blockquote:after, q:before, q:after {

content: “”

}

blockquote, q {

quotes: “” “”

}

input, textarea {

margin: 0;

padding: 0

}

hr {

margin: 0;

padding: 0;

border: 0;

color: #000;

background-color: #000;

height: 1px

}

十五.CSSLab CSS Reset

CSS Code復(fù)制內(nèi)容到剪貼板

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, font, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li,

fieldset, form, label, legend, table, caption, tbody, tfoot,

thead, tr, th, td {

margin: 0;

padding: 0;

border: 0;

outline: 0;

font-weight: inherit;

font-style: inherit;

font-size: 100%;

font-family: inherit;

vertical-align: baselinebaseline;

}

:focus {

outline: 0;

}

table {

border-collapse: separate;

border-spacing: 0;

}

caption, th, td {

text-align: left;

font-weight: normal;

}

a img, iframe {

border: none;

}

ol, ul {

list-style: none;

}

input, textarea, select, button {

font-size: 100%;

font-family: inherit;

}

select {

margin: inherit;

}

/* Fixes incorrect placement of numbers in ol’s in IE6/7 */

ol { margin-left:2em; }

/* == clearfix == */

.clearfix:after {

content: “.”;

display: block;

height: 0;

clear: both;

visibility: hidden;

}

.clearfix {display: inline-block;}

* html .clearfix {height: 1%;}

.clearfix {display: block;}

好了，CSS重設(shè)目前先總結(jié)到這里，這15套重設(shè)方法其實(shí)都是有共同點(diǎn)的，也許有的實(shí)現(xiàn)方法不同，但大部分都是同一個(gè)目的，就是為了讓更多的瀏覽器能顯示同樣的效果。有了這些CSS重設(shè)作為資料和參考，也許會(huì)對(duì)你的工作有所幫助甚至提高效率，但是，畢竟這些重設(shè)都是別人寫(xiě)的，你完全也可以為自己量身定制一套CSS重設(shè)。

更多信息請(qǐng)查看IT技術(shù)專(zhuān)欄