在當(dāng)今網(wǎng)頁(yè)設(shè)計(jì)/開發(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)樯鲜?a target="_blank" href="http://www.xinzz.cc">沖突和問(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)題。

 

今天暴風(fēng)彬彬總結(jié)收集了15套CSS重設(shè)實(shí)例，您可以在前端開發(fā)工作中進(jìn)行參考和使用，有些是很簡(jiǎn)化的CSS Reset，有些則是非常復(fù)雜非常全面的CSS Reset，至于使用哪套，全看您的愛(ài)好或需要。

 

彬Go會(huì)經(jīng)常更新前端開發(fā)/網(wǎng)頁(yè)設(shè)計(jì)等相關(guān)技術(shù)及教程文章，歡迎訂閱本博客來(lái)及時(shí)瀏覽本博客的最新教程及資源。

 

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

* {

      padding: 0;

      margin: 0;

}

 

 

 

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

 

* {

       padding: 0;

       margin: 0;

       border: 0;

}

 

 

 

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

 

* {

       outline: 0;

       padding: 0;

       margin: 0;

       border: 0;

}

 

 

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

 

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

* {

       vertical-align: baseline;

       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:

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

{

    vertical-align: baseline;

    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

 

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:

 

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