目前比較全的CSS重設(reset)方法總結
在當今網頁設計/開發實踐中，使用CSS來為語義化的(X)HTML標記新增樣式風格是重要的關鍵。在設計師們的夢想中都存在著這樣的一個完美世界:所有的瀏覽器都能夠理解和適用多有CSS規則，並且呈現相同的視覺效果(沒有相容性問題)。但是，我們並沒有生活在這個完美的世界，現實中發生的失竊卻總是恰恰相反，很多CSS樣式在不同的瀏覽器中有著不同的解釋和呈現。
當今流行的瀏覽器(如:Firefox、Opera、Internet Explorer、Chrome、Safari等等)中，有一些都是以自己的方式去理解CSS規範，這就會導致有的瀏覽器對CSS的解釋與設計師的CSS定義初衷相沖突，使得網頁的樣子在某些瀏覽器下能正確按照設計師的想法顯示，但有些瀏覽器卻並沒有按照設計師想要的樣子顯示出來，這就導致瀏覽器的相容性問題。更糟的是，有的瀏覽器完全無視CSS的一些宣告和屬性。
正因為上述衝突和問題依然存在於這個”不完美的世界”，所以一些設計師想到了一種避免瀏覽器相容性問題的方法，那就是CSS Reset，什麼是CSS Reset？我們可以把它叫做CSS重設，也有人叫做CSS復位、預設CSS、CSS重置等。CSS重設就是由於各種瀏覽器解釋CSS樣式的初始值有所不同，導致設計師在沒有定義某個CSS屬性時，不同的瀏覽器會按照自己的預設值來為沒有定義的樣式賦值，所以我們要先定義好一些CSS樣式，來讓所有瀏覽器都按照同樣的規則解釋CSS，這樣就能避免發生這種問題。
一.最簡化的CSS Reset(重設) :
* {
padding: 0;
margin: 0;
}
這是最普遍最簡單的CSS重設，將所有元素的padding和margin值都設為0，可以避免一些瀏覽器在理解這兩個屬性預設值上的”分歧”。
* {
padding: 0;
margin: 0;
border: 0;
}
這是在上一個重設的基礎上新增了對border屬性的重設，初始值為0的確能避免一些問題。
* {
outline: 0;
padding: 0;
margin: 0;
border: 0;
}
在前兩個的基礎上新增了outline屬性的重設，防止一些衝突。
二.濃縮實用型CSS Reset(重設):
* {
vertical-align: baseline;
font-weight: inherit;
font-family: inherit;
font-style: inherit;
font-size: 100%;
outline: 0;
padding: 0;
margin: 0;
border: 0;
}
該CSS重設方法出自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;
}
這個重設方法將html和body下元素的padding和margin都設為0，並分別為html標籤和body標籤下的所有元素設定了初始的字型大小，最重要的是把有連結的圖片的預設邊框去掉了。
四.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 {
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
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: baseline;
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:
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
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: baseline;
}
: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
* {
vertical-align: baseline;
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
: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
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
* {
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;
bottom: 0.3em;
vertical-align: baseline;
}
sub {
position: relative;
bottom: -0.2em;
vertical-align: baseline;
}
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-right {
float: right;
}
body {
text-align: center;
}
#wrapper {
margin: 0 auto;
text-align: left;
}
十四. Anieto2K Reset CSS
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: baseline
}
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
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: baseline;
}
: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重設目前先總結到這裡，這15套重設方法其實都是有共同點的，也許有的實現方法不同，但大部分都是同一個目的，就是為了讓更多的瀏覽器能顯示同樣的效果。有了這些CSS重設作為資料和參考，也許會對你的工作有所幫助甚至提高效率，但是，畢竟這些重設都是別人寫的，你完全也可以為自己量身定製一套CSS重設。
本文轉自寒意部落格園部落格，原文連結：http://www.cnblogs.com/hnyei/archive/2011/10/04/2198779.html，如需轉載請自行聯絡原作者
相關文章
- 去除csdn廣告的方法，多種方法比較總結
- CSS設定居中的方案總結-超全CSS
- 原生JS基礎但比較有用的一些方法總結JS
- 常用的比較排序演算法總結排序演算法
- 《CSS重構》閱讀總結CSS
- git reset rebase 用法總結Git
- css resetCSS
- 前端比較實用的CSS前端CSS
- RxJava 系列-1：一篇的比較全面的 RxJava2 方法總結RxJava
- 比較全的oracle事件解釋Oracle事件
- 全網比較好的 Markdown 教程
- awk的一個比較不錯的總結網頁網頁
- 目前哪些開源雲監控工具比較好用！
- css-resetCSS
- python pandas常用統計函式總結_包括groupby,crossTab等方法結合使用的比較Python函式ROS
- 陣列去重方法總結陣列
- 比較全的log4j示例
- java集合遍歷的幾種方式總結及比較Java
- RxJava2 系列-1：一篇的比較全面的 RxJava2 方法總結RxJava
- 5種排序演算法效能比較總結排序演算法
- UITableView設定全屏分隔線的幾種方法比較UIView
- 最簡單的css resetCSS
- JavaScript陣列去重方法總結JavaScript陣列
- 一個比較全的simsun.ttf字型設定檔案(轉)
- 拷貝建構函式（比較全的）函式
- Solr與Elasticsearch的優缺點比較總結和歸納SolrElasticsearch
- 好程式設計師web前端分享主流CSS image比較程式設計師Web前端CSS
- jQuery的prop和attr方法比較jQuery
- 不同備份方法的特性比較
- Cesium 比較常用的幾個方法
- css--元素居中常用方法總結CSS
- css Reset程式碼分享CSS
- CSS-reset&規範CSS
- initialize方法與load方法比較
- 126 PHP目前比較常見的五大執行模式PHP模式
- JavaScript遍歷方法總結與對比JavaScript
- 資料結構比較資料結構
- 設計用例的方法總結