- A+
這篇文章主要給大家介紹了瀏覽器默認(rèn)樣式（User Agent Stylesheet）的相關(guān)資料，并給出了相對(duì)應(yīng)的最佳解決方法。有需要的朋友可以參考借鑒，下面來(lái)一起看看吧。
發(fā)現(xiàn)
最近在調(diào)整網(wǎng)頁(yè)的格式發(fā)現(xiàn)網(wǎng)頁(yè)底部總是有一個(gè)10像素左右的空格。
通過(guò)用Chrome流浪器的審查元素發(fā)現(xiàn)有一個(gè)叫user agent stylesheet設(shè)置整個(gè)form的margin-botton:1em;
通過(guò)上網(wǎng)查資料發(fā)現(xiàn)這個(gè)user agent stylesheet是流浪器的一些默認(rèn)樣式。如果對(duì)這個(gè)默認(rèn)樣式不滿(mǎn)意最簡(jiǎn)單的解決辦法就是重新設(shè)置該樣式的屬性，因?yàn)閡ser agent stylesheet優(yōu)先級(jí)很低，會(huì)被覆蓋，這樣就不會(huì)影響到我們的樣式了，比如這里我就講form 的margin-bottom設(shè)為0px。
User Agent Stylesheet介紹
不同瀏覽器對(duì)于相同元素的默認(rèn)樣式并不一致，這也是為什么我們?cè)贑SS的最開(kāi)始要寫(xiě) * {padding:0;marging:0}；
不過(guò)現(xiàn)在說(shuō)的可不只是這些。基本上，不同內(nèi)核的兩個(gè)瀏覽器在某些元素的表現(xiàn)都會(huì)存在差異，比如縮進(jìn)的大小、字體選擇、字符樣式等。也許一個(gè)很漂亮的CSS樣式表在一個(gè)瀏覽器上表現(xiàn)良好，在另外一個(gè)瀏覽器上即使是沒(méi)有CSS Bug的情況也會(huì)變得結(jié)構(gòu)混亂起來(lái)，我都是瀏覽器默認(rèn)樣式在作怪。
因此，我們?cè)谏蒀SS樣式規(guī)則的時(shí)候，一個(gè)必做的步驟就是重設(shè)瀏覽器的默認(rèn)樣式，也就是覆蓋掉瀏覽器的默認(rèn)樣式。和使用 * {padding:0;margin:0}有所不同，并不是所有的元素都存在padding和margin的差異（元素列表、有序列表在Internet Xplorer和Firefox中的不同是由于它們的縮進(jìn)采用了margin縮進(jìn)和padding縮進(jìn)）。
例如下面這段：
這段代碼在Internet Explorer中使用的字體是Times New Roman，而在Firefox和Opera中使用的是系統(tǒng)默認(rèn)字體。因此我們要為＜h1＞在CSS中設(shè)定一個(gè)統(tǒng)一的樣式。
但是，如果我們像使用* {padding:0;margin:0}一樣去使用通配符“*”來(lái)簡(jiǎn)單地設(shè)定全局樣式，那么一個(gè)很明顯的問(wèn)題就會(huì)出現(xiàn)，比如像form元素、input元素、textarea等在某些瀏覽器中會(huì)忽略對(duì)它們的重新設(shè)定，更重要的是這將會(huì)嚴(yán)重破壞這些元素的外觀(guān)，所以你又不得不去手動(dòng)去一一為它們重新設(shè)定一個(gè)padding值和margin值。所以我們應(yīng)該放棄簡(jiǎn)單地使用“*”，而是為第一個(gè)存在表現(xiàn)不一致的元素進(jìn)行重設(shè)，如body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre等等。
同時(shí)，元素的默認(rèn)樣式可能會(huì)破壞頁(yè)面的外觀(guān)。比如＜b＞元素會(huì)把文字加粗，＜blockquote＞會(huì)大段縮進(jìn)，＜em＞會(huì)使文字傾斜等，如果你想要求頁(yè)面文本外觀(guān)一致的話(huà)，也應(yīng)該在CSS中把這些元素的外觀(guān)進(jìn)行重設(shè)。同時(shí)，有時(shí)候我們要求這些元素的外觀(guān)和父元素一樣，可以直接使用 inherit從父元素繼承即可。
處理方法
至于哪些元素應(yīng)該被重設(shè)？Yahoo!已經(jīng)為我們做了比較出的總結(jié)。根據(jù)雅虎的建議，你需要把這些規(guī)則放到一個(gè)名為Reset.css的文件中單獨(dú)引用（推薦這種做法）：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
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ī)則簡(jiǎn)單地保存到reset.css中，然后在頁(yè)面中使用。在需要給這些元素增加新的樣式的時(shí)候，和其它元素的設(shè)定沒(méi)有什么不同。
注意：上面reset.css中 input,textarea,select{*font-size:100%;} 只有Internet Explorer可以認(rèn)識(shí)，這樣的設(shè)定是為了使在Internet Explorer中可以縮放表單控件字體的大小。
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助
