如何全面解決 CSS 在不同瀏覽器下的兼容問題？

01-16

一個新入門的新手，現在基本的CSS語法都會了，但是做出來的頁面在不同瀏覽器上顯示效果有差距。有得甚至是變形金剛。
想請教一下前輩們，如何能解決這些兼容問題。

「做出來的頁面在不同瀏覽器上顯示效果有差距」這個有很多原因。

各瀏覽器默認的樣式不一樣，比如 h 元素的 margin、字型大小，列表元素的縮進是 margin 還是 padding 等。需要先把這些默認樣式覆蓋掉，也叫初始化或 Reset。建議用 YUI 的 Reset CSS，應該是目前比較全的了 http://developer.yahoo.com/yui/reset/
各瀏覽器對同一個屬性的理解不一樣或 bug，比如最煩人的 font-family，這個多找相關的文章看看，一般可以總結出來一個比較好的解決方案。針對 IE 的 bug，萬不得已可以用 hack，我還從來沒用過……
某個屬性瀏覽器壓根不支持，這個就需要積累了。

開發的時候最好在 Firefox 下進行（Chrome 也行，但是總感覺 Chrome 會把人慣壞），然後在 IE6 下調整一下（如果還需要考慮 IE6 的話），最後可以在 Opera 下看看行不行……

我一般的做法是——

先在對 W3C 標準支持最佳的瀏覽器上實現（好像是 Chrome 吧？）

然後針對其他瀏覽器寫 Hack

最直接的方法就是用第三方的插件.像bootstrap,compasser等

這些插件基本都處理了這種不兼容的問題.

CSS Reset - YUI Library

CSS Fonts - YUI Library

曾經做過幾百個網站的div css吧。

最快時1小時多一個網站。

用hack解決一切兼容問題。

height

_height

*height

世界上最難的編程就是解決瀏覽器兼容問題. 這東西需要經驗加+天分的

碰到就去搜一搜，會有好多解決方案，還有大牛的針對問題出現的分析。

自己整理常見不兼容css的文檔。碰到的問題多了，解決的問題多了。兼容就不再是問題了。css的

在筆記本上做好了網頁，打開網頁是正常的換到液晶電腦上就出現問題了，請問大家這

我也遇到過的兩個最蛋疼的問題,後來設置 font-family才解決。

明顯IE系列比較令人糾結，但是稍加註意還是可以避免這些兼容問題的。

css雖然簡單，但是也不是知道語法就可以走天下的東西。

最容易出錯的，float和position，其間涉及到文檔流、視覺格式化的很多抽象概念。

還有例如margin的垂直壓縮，都是需要學習理論的。

至於瀏覽器的兼容，實際上，已經存在的bug基本就那麼多了（主要就是ie6/7/8），所以多做多搜索答案就沒什麼太難的東西。

（個人偏方）----用ie6作為默認的測試瀏覽器。

ie6下顯示正常，再去兼容其他瀏覽器。會很容易。。

如果是其他瀏覽器正常，再去兼容ie6，那將是非常恐怖的！

很多人說用hack。那樣的話網站通不過css2.0標準認證。

只要你不在乎1~2px的像素差，不用hack也能寫出差不多的樣式。

我說說我遇到過的兩個最蛋疼的問題：

一個是 input元素與文字對齊的問題：

http://www.blueidea.com/tech/web/2009/6910.asp

另一個是 line-height和字體實際高度的問題：

http://ucdchina.com/snap/3801

這兩個問題，所有瀏覽器的處理方式都不一樣，無比蛋疼。

你可以去看一下大網站的複選框和旁邊的文字，（垂直）普遍對不齊。

↑網易

↑豆瓣瀏覽器市場，還是一家壟斷比較好！！