CSS Hack 針對(duì)瀏覽器兼容性的分析

　　一、基礎(chǔ)概念

　　CSS hack：針對(duì)不同的瀏覽器寫(xiě)不同的CSS code的過(guò)程。

　　Css hack的原理：由于不同的瀏覽器對(duì)CSS的支持及解析結(jié)果不一樣，還由于CSS中的優(yōu)先級(jí)的關(guān)系。我們就可以根據(jù)這個(gè)來(lái)針對(duì)不同的瀏覽器來(lái)寫(xiě)不同的CSS。

　　瀏覽器優(yōu)先級(jí)別：FF < IE7 < IE6

　　書(shū)寫(xiě)順序一般是將識(shí)別能力強(qiáng)的瀏覽器的CSS寫(xiě)在后面，CSS hack書(shū)寫(xiě)順序一般為FF IE7 IE6

　　div+css瀏覽器兼容IE6,IE7,FF之間的標(biāo)識(shí)區(qū)別：

　　1. IE都能識(shí)別* ; 標(biāo)準(zhǔn)瀏覽器(如FF)不能識(shí)別*;

　　2. IE6能識(shí)別*，但不能識(shí)別 !important,

　　3. IE7能識(shí)別*，也能識(shí)別!important;

　　4. firefox不能識(shí)別*，但能識(shí)別!important;

　　1.IE6和firefox的區(qū)別：

　　background:orange;*background:blue;

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

　　2. IE6和IE7的區(qū)別：

　　background:green !important;background:blue;

　　意思指的是:IE7的背景顏色是綠色,IE6的背景顏色是藍(lán)色

　　3. IE7和FF的區(qū)別：

　　background:orange; *background:green;

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

　　4. FF，IE7，IE6的區(qū)別：

　　background:orange;

　　*background:green !important;

　　*background:blue;

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

　　二、實(shí)踐建議

　　(一). 開(kāi)發(fā)平臺(tái)的選擇

　　在 Firefox 上編寫(xiě)CSS, 同時(shí)兼容其他瀏覽器的. 這樣做肯定會(huì)比在 IE 做好再到別的瀏覽器兼容來(lái)得容易, 因?yàn)?IE 對(duì)老標(biāo)準(zhǔn)支持還是很不錯(cuò)的, 而 IE 的一些特有功能人家卻不支持. 所以推薦以 Firefox 結(jié)合 Firebug 擴(kuò)展作為平臺(tái)。

　　(二). CSS Hack 的順序

　　使用 Firefox 作為平臺(tái), 只要代碼寫(xiě)得夠標(biāo)準(zhǔn), 其實(shí)要 Hack 的地方不會(huì)很多的, IE 以外的瀏覽器幾乎都不會(huì)有問(wèn)題, 所以可以暫時(shí)忽略,

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

　　(三). Hack 的方法

　　說(shuō)到方法有兩種, 一種是在不同文件中處理, 另一種則是在同一個(gè)文件中處理. 其實(shí)作用是相同的, 只是出發(fā)點(diǎn)不一樣而已.

　　1. 同一文件中處理.

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

　　IE6 不認(rèn) !important, 也不認(rèn) *+html. 所以 IE6 只能是 blue.

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

　　Firefox 和其他瀏覽器都認(rèn) !important. !important 優(yōu)先, Firefox 可以是 red 和 blue, 但 red 優(yōu)先度高.

　　上述的優(yōu)先符號(hào)均是 CSS3 標(biāo)準(zhǔn)允許的, 其他瀏覽器也還有其他的 Hack 方法, 但我迄今還沒(méi)遇到過(guò) Firefox 正常, IE 以外的其他瀏覽器不正常的情況, 所以無(wú)可分享. 只要代碼規(guī)范, 相信這種情況的發(fā)生應(yīng)該是很罕見(jiàn) (JavaScript 除外).

　　2. 不同文件中處理.

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

　　網(wǎng)頁(yè)前臺(tái)的兼容不應(yīng)該僅限于對(duì)過(guò)去的瀏覽器支持 (向前兼容), 更應(yīng)該對(duì)未來(lái)的瀏覽器服務(wù) (向后兼容). 因?yàn)闉g覽器的發(fā)展很快, 而經(jīng)常上網(wǎng)的人更新軟件的頻率非常高的, 所以向后兼容的意義甚至比先前兼容還來(lái)得重要. 如何向后兼容呢? 只要符合標(biāo)準(zhǔn)你的網(wǎng)站就永遠(yuǎn)不會(huì)過(guò)時(shí) (IE 系列除外).所以盡量做到標(biāo)準(zhǔn), 不得已才Hack,盡量使用比較簡(jiǎn)單的方法去解決.

生活不易，碼農(nóng)辛苦
如果您覺(jué)得本網(wǎng)站對(duì)您的學(xué)習(xí)有所幫助,可以手機(jī)掃描二維碼進(jìn)行捐贈(zèng)