Reset CSS

Reset CSS?

對 CSS 稍有經驗的人都知道，同樣的 CSS 檔案在不同的瀏覽器（Chrome, FF 或 IE 等）得到的結果有點不太一樣，這起因於兩個原因，第一個是各家瀏覽器使用不同的預設值，例如 line-height、margin、font-size 等，這就是 Reset CSS 的由來，第二個是 render 引擎不同，當然結果會有些微的不同，這是無解的，所以只好不斷的教育客戶或使用者，在不同瀏覽器要得到完全相同的結果是不可能的。

最常用的是...

網路上可以找到很多 Reset CSS，最常被使用的是 meyerweb.com，可以從 http://meyerweb.com/eric/tools/css/reset/reset.css 下載。

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

Reset CSS 內容就是盡可能找出各家瀏覽器可能不同的預設值，然後予以合理的預設值，使用邏輯就是先歸零再開始寫自己的 CSS，這樣就可以盡量消除因為不同的瀏覽器預設值帶來的傷害。

<link type="text/css" rel="stylesheet" href="<c:url value="/css/reset.css"/>" />
<link type="text/css" rel="stylesheet" href="<c:url value="/css/your.css"/>" />

這份 Reset CSS 設定的非常通用，除了弭平差異外，並未設定任何因網站而異的預設值，例如字型大小與顏色或網頁背景色等。
---
---
---