CSS Hack 針對瀏覽器兼容性的分析

　　一、基礎概念

　　CSS hack：針對不同的瀏覽器寫不同的CSS code的過程。

　　Css hack的原理：由于不同的瀏覽器對CSS的支持及解析結果不一樣，還由于CSS中的優先級的關系。我們就可以根據這個來針對不同的瀏覽器來寫不同的CSS。

　　瀏覽器優先級別：FF < IE7 < IE6

　　書寫順序一般是將識別能力強的瀏覽器的CSS寫在后面，CSS hack書寫順序一般為FF IE7 IE6

　　div+css瀏覽器兼容IE6,IE7,FF之間的標識區別：

　　1. IE都能識別* ; 標準瀏覽器(如FF)不能識別*;

　　2. IE6能識別*，但不能識別 !important,

　　3. IE7能識別*，也能識別!important;

　　4. firefox不能識別*，但能識別!important;

　　1.IE6和firefox的區別：

　　background:orange;*background:blue;

　　意思就是火狐瀏覽器的背景顏色是橙色,而IE瀏覽器的背景色是藍色.

　　2. IE6和IE7的區別：

　　background:green !important;background:blue;

　　意思指的是:IE7的背景顏色是綠色,IE6的背景顏色是藍色

　　3. IE7和FF的區別：

　　background:orange; *background:green;

　　意思指的是:火狐瀏覽器的背景顏色是橙色,而IE7的背景顏色是綠色

　　4. FF，IE7，IE6的區別：

　　background:orange;

　　*background:green !important;

　　*background:blue;

　　意思是火狐瀏覽器的的背景橙色,IE7瀏覽器的背景顏色是綠色,而IE6瀏覽器的顏色是藍色.

　　二、實踐建議

　　(一). 開發平臺的選擇

　　在 Firefox 上編寫CSS, 同時兼容其他瀏覽器的. 這樣做肯定會比在 IE 做好再到別的瀏覽器兼容來得容易, 因為 IE 對老標準支持還是很不錯的, 而 IE 的一些特有功能人家卻不支持. 所以推薦以 Firefox 結合 Firebug 擴展作為平臺。

　　(二). CSS Hack 的順序

　　使用 Firefox 作為平臺, 只要代碼寫得夠標準, 其實要 Hack 的地方不會很多的, IE 以外的瀏覽器幾乎都不會有問題, 所以可以暫時忽略,

　　順序如下：Firefox -> IE6 -> IE7 -> 其他

　　(三). Hack 的方法

　　說到方法有兩種, 一種是在不同文件中處理, 另一種則是在同一個文件中處理. 其實作用是相同的, 只是出發點不一樣而已.

　　1. 同一文件中處理.

　　如: id="bgcolor" 的控件要在 IE6 中顯示藍色, IE7 中顯示綠色, Firefox 等其他瀏覽器中顯示紅色。

　　IE6 不認 !important, 也不認 *+html. 所以 IE6 只能是 blue.

　　IE7 認 !important, 也認 *+html, 優先度: (*+html + !important) > !important > +html. IE7 可以是 red, blue 和 green, 但 green 的優先度最高.

　　Firefox 和其他瀏覽器都認 !important. !important 優先, Firefox 可以是 red 和 blue, 但 red 優先度高.

　　上述的優先符號均是 CSS3 標準允許的, 其他瀏覽器也還有其他的 Hack 方法, 但我迄今還沒遇到過 Firefox 正常, IE 以外的其他瀏覽器不正常的情況, 所以無可分享. 只要代碼規范, 相信這種情況的發生應該是很罕見 (JavaScript 除外).

　　2. 不同文件中處理.

　　為什么同一文件中可以處理還要寫在多個文件里面針對不同的瀏覽器? 這是為了欺騙 W3C 的驗證工具, 其實只需要兩個文件, 一個是針對所有瀏覽器的, 一個只為 IE 服務. 將所有符合 W3C 的代碼寫到一個里面去, 而一些 IE 中必須的, 又不能通過 W3C 驗證的代碼 (如: cursor:hand;) 放到另一個文件中, 再用下面的方法導入.

　　網頁前臺的兼容不應該僅限于對過去的瀏覽器支持 (向前兼容), 更應該對未來的瀏覽器服務 (向后兼容). 因為瀏覽器的發展很快, 而經常上網的人更新軟件的頻率非常高的, 所以向后兼容的意義甚至比先前兼容還來得重要. 如何向后兼容呢? 只要符合標準你的網站就永遠不會過時 (IE 系列除外).所以盡量做到標準, 不得已才Hack,盡量使用比較簡單的方法去解決.

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈