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

不同瀏覽器對于相同元素的默認樣式并不一致，這也是為什么我們在CSS的最開始要寫 * {padding:0;marging:0}；

不過現(xiàn)在說的可不只是這些?；旧?，不同內(nèi)核的兩個瀏覽器在某些元素的表現(xiàn)都會存在差異，比如縮進的大小、字體選擇、字符樣式等。也許一個很 漂亮的CSS樣式表在一個瀏覽器上表現(xiàn)良好，在另外一個瀏覽器上即使是沒有CSS Bug的情況也會變得結(jié)構(gòu)混亂起來，我都是瀏覽器默認樣式在作怪。

因此，我們在生成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)為我們做了比較出的總結(jié)。根據(jù)雅虎的建議，你需要把這些規(guī)則放到一個名為Reset.css的文件中單獨引用（推薦這種做法）：


你要做的就是把這些規(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)站也給出了一個新的寫法：



PS:在做網(wǎng)站時，遇到這樣的問題。各個瀏覽器兼容的問題，單寫好CSS不行，還得對其進行初始化，這樣，在各個瀏覽器上運行頁面才不會變形。本人正研究中，希望有經(jīng)驗的朋友也給我指教一下。。

最新評論