不同瀏覽器對于相同元素的默認樣式并不一致，這也是為什么我們在CSS的最開始要寫 * {padding:0;marging:0}；
不過現(xiàn)在說的可不只是這些。基本上，不同內核的兩個瀏覽器在某些元素的表現(xiàn)都會存在差異，比如縮進的大小、字體選擇、字符樣式等。也許一個很漂亮的CSS樣式表在一個瀏覽器上表現(xiàn)良好，在另外一個瀏覽器上即使是沒有CSS Bug的情況也會變得結構混亂起來，我都是瀏覽器默認樣式在作怪。
因此，我們在生成CSS樣式規(guī)則的時候，一個必做的步驟就是重設瀏覽器的默認樣式，也就是覆蓋掉瀏覽器的默認樣式。和使用 * {padding:0;margin:0}有所不同，并不是所有的元素都存在padding和margin的差異（元素列表、有序列表在Internet Xplorer和Firefox中的不同是由于它們的縮進采用了margin縮進和padding縮進）。例如下面這段代碼：
<h1> Headlines are very important Elements in XHTML</h1>
這段代碼在Internet Explorer中使用的字體是Times New Roman，而在Firefox和Opera中使用的是系統(tǒng)默認字體。因此我們要為<h1>在CSS中設定一個統(tǒng)一的樣式。
但是，如果我們像使用* {padding:0;margin:0}一樣去使用通配符“*”來簡單地設定全局樣式，那么一個很明顯的問題就會出現(xiàn)，比如像form元素、input元素、textarea等在某些瀏覽器中會忽略對它們的重新設定，更重要的是這將會嚴重破壞這些元素的外觀，所以你又不得不去手動去一一為它們重新設定一個padding值和margin值。所以我們應該放棄簡單地使用“*”，而是為第一個存在表現(xiàn)不一致的元素進行重設，如body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre等等。
同時，元素的默認樣式可能會破壞頁面的外觀。比如<b>元素會把文字加粗，<blockquote>會大段縮進，<em>會使文字傾斜等，如果你想要求頁面文本外觀一致的話，也應該在CSS中把這些元素的外觀進行重設。同時，有時候我們要求這些元素的外觀和父元素一樣，可以直接使用 inherit從父元素繼承即可。
至于哪些元素應該被重設？Yahoo!已經(jīng)為我們做了比較出的總結。根據(jù)雅虎的建議，你需要把這些規(guī)則放到一個名為Reset.css的文件中單獨引用（推薦這種做法）：
html{color:#000;background:#FFF;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,
fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset,img {
border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-style:normal;
font-weight:normal;
}
ol,ul {
list-style:none;
}
caption,th {
text-align:left;
}
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:normal;
}
q:before,q:after {
content:'';
}
abbr,acronym { border:0;
}
你要做的就是把這些規(guī)則簡單地保存到reset.css中，然后在頁面中使用。在需要給這些元素增加新的樣式的時候，和其它元素的設定沒有什么不同。
注意：上面reset.css中 input,textarea,select{*font-size:100%;} 只有Internet Explorer可以認識，這樣的設定是為了使在Internet Explorer中可以縮放表單控件字體的大小。而 legend{color:#000;} 是因為在Internet Explorer中l(wèi)engend元素使用字體顏色和系統(tǒng)有關（甚至和系統(tǒng)風格有關）。這里還要指出的是，html{color:#000;background:#FFF;} 這條規(guī)則雖是細節(jié)，卻很重要，因為在某些時候他直接影響了頁面的整體外觀，百度就存在這樣的設計失誤（雅虎沒似乎也沒有給這一條，但是在某個示例中似乎出現(xiàn)了）。
和Yahoo!一樣，Eric Meyer在他的網(wǎng)站也給出了一個新的寫法：
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;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}
在文中他還提到了 Internet Explorer 中解決 inherit 的問題（我研究之后也想簡單寫一下），值得研究（查看原文：Reset Reloaded）。其實這兩個reset.css差別并不大，可以選擇其中之一或者合并使用。
reset.css是每個頁面都必須的樣式文件（或者你已經(jīng)把它內置到相關的CSS文件中了），是我們實現(xiàn)跨瀏覽器設計的不可缺少的一環(huán)。
原文連接：http://www.dudo.org/article.asp?id=243
