重置瀏覽器默認(rèn)樣式

2024-07-11 08:45:44

字體：大中小

供稿：網(wǎng)友

不同的瀏覽器對(duì)CSS的兼容問題在學(xué)習(xí)及運(yùn)用過程中占到了絕大部分。作為一個(gè)閉門造車的學(xué)鳥~偶是一路google+baidu過來的，雖然到現(xiàn)在還是鳥~但還是要慢慢總結(jié)。
為了盡可能從開始就減少問題的產(chǎn)生，鳥們需要在開始寫CSS的時(shí)候就把各個(gè)不同的瀏覽器樣式重置到一個(gè)樣子~以減少后面打補(bǔ)丁的數(shù)量和降低問題產(chǎn)生的可能性。要知道，有時(shí)候分析問題產(chǎn)生的根源比解決問題所花費(fèi)的時(shí)間要多的多得多。關(guān)于如何快速定位頁面中復(fù)雜的css bug 的問題，請(qǐng)參閱懌飛的這篇文章

不同瀏覽器對(duì)于相同元素的默認(rèn)樣式并不一致，這也是為什么我們?cè)贑SS的最開始要寫 * {padding:0;marging:0}；

不過現(xiàn)在說的可不只是這些。基本上，不同內(nèi)核的兩個(gè)瀏覽器在某些元素的表現(xiàn)都會(huì)存在差異，比如縮進(jìn)的大小、字體選擇、字符樣式等。也許一個(gè)很漂亮的CSS樣式表在一個(gè)瀏覽器上表現(xiàn)良好，在另外一個(gè)瀏覽器上即使是沒有CSS Bug的情況也會(huì)變得結(jié)構(gòu)混亂起來，我都是瀏覽器默認(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)）。例如下面這段代碼：

＜h1＞ Headlines are very important Elements in XHTML＜/h1＞

這段代碼在Internet Explorer中使用的字體是Times New Roman，而在Firefox和Opera中使用的是系統(tǒng)默認(rèn)字體。因此我們要為＜h1＞在CSS中設(shè)定一個(gè)統(tǒng)一的樣式。

但是，如果我們像使用* {padding:0;margin:0}一樣去使用通配符“*”來簡單地設(shè)定全局樣式，那么一個(gè)很明顯的問題就會(huì)出現(xiàn)，比如像form元素、input 元素、textarea等在某些瀏覽器中會(huì)忽略對(duì)它們的重新設(shè)定，更重要的是這將會(huì)嚴(yán)重破壞這些元素的外觀，所以你又不得不去手動(dòng)去一一為它們重新設(shè)定一個(gè)padding值和margin值。所以我們應(yīng)該放棄簡單地使用“*”，而是為第一個(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ì)破壞頁面的外觀。比如＜b＞元素會(huì)把文字加粗，＜blockquote＞會(huì)大段縮進(jìn)，＜em＞會(huì)使文字傾斜等，如果你想要求頁面文本外觀一致的話，也應(yīng)該在CSS中把這些元素的外觀進(jìn)行重設(shè)。同時(shí)，有時(shí)候我們要求這些元素的外觀和父元素一樣，可以直接使用 inherit從父元素繼承即可。

至于哪些元素應(yīng)該被重設(shè)？Yahoo!已經(jīng)為我們做了比較出的總結(jié)。根據(jù)雅虎的建議，你需要把這些規(guī)則放到一個(gè)名為Reset.css的文件中單獨(dú)引用（推薦這種做法）：

復(fù)制代碼

上一篇：IE bug input 外層浮動(dòng)的邊距問題

下一篇：兩種跨瀏覽器的自適應(yīng)高的css代碼