瀏覽器默認樣式（User Agent Stylesheet）

原文：http://www.zjgsq.com/898.html

不一樣瀏覽器對於相同元素的默認樣式並不一致，這也是爲何咱們在CSS的最開始要寫 * {padding:0;marging:0}；

不過如今說的可不僅是這些。基本上，不一樣內核的兩個瀏覽器在某些元素的表現都會存在差別，好比縮進的大小、字體選擇、字符樣式等。也許一個很漂亮的CSS樣式表在一個瀏覽器上表現良好，在另一個瀏覽器上即便是沒有CSS Bug的狀況也會變得結構混亂起來，我都是瀏覽器默認樣式在做怪。

所以，咱們在生成CSS樣式規則的時候，一個必作的步驟就是重設瀏覽器的默認樣式，也就是覆蓋掉瀏覽器的默認樣式。和使用 * {padding:0;margin:0}有所不一樣，並非全部的元素都存在padding和margin的差別（元素列表、有序列表在Internet Xplorer和Firefox中的不一樣是因爲它們的縮進採用了margin縮進和padding縮進）。例以下面這段代碼：

Headlines are very important Elements in XHTML

這段代碼在Internet Explorer中使用的字體是Times New Roman，而在Firefox和Opera中使用的是系統默認字體。所以咱們要爲＜h1＞在CSS中設定一個統一的樣式。

可是，若是咱們像使用* {padding:0;margin:0}同樣去使用通配符「*」來簡單地設定全局樣式，那麼一個很明顯的問題就會出現，好比像form元素、input元素、textarea等在某些瀏覽器中會忽略對它們的從新設定，更重要的是這將會嚴重破壞這些元素的外觀，因此你又不得不去手動去一一爲它們從新設定一個padding值和margin值。因此咱們應該放棄簡單地使用「*」，而是爲第一個存在表現不一致的元素進行重設，如body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre等等。

同時，元素的默認樣式可能會破壞頁面的外觀。好比＜b＞元素會把文字加粗，＜blockquote＞會大段縮進，＜em＞會使文字傾斜等，若是你想要求頁面文本外觀一致的話，也應該在CSS中把這些元素的外觀進行重設。同時，有時候咱們要求這些元素的外觀和父元素同樣，能夠直接使用 inherit從父元素繼承便可。

至於哪些元素應該被重設？Yahoo!已經爲咱們作了比較出的總結。根據雅虎的建議，你須要把這些規則放到一個名爲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; 
} 

你要作的就是把這些規則簡單地保存到reset.css中，而後在頁面中使用。在須要給這些元素增長新的樣式的時候，和其它元素的設定沒有什麼不一樣。

　　注意：上面reset.css中 input,textarea,select{*font-size:100%;} 只有Internet Explorer能夠認識，這樣的設定是爲了使在Internet Explorer中能夠縮放表單控件字體的大小。