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之間的標識區別：

	IE6	IE7	FF
*	√	√	×
important	×	√	√

 

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

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

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

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

 

1．IE6和firefox的區別：
       background:orange;*background:blue;
       意思就是Firefox瀏覽器的背景顏色是橙色,而IE瀏覽器的背景色是藍色.

2. IE6和IE7的區別：
       background:green !important;background:blue;
       意思指的是:IE7的背景顏色是綠色,IE6的背景顏色是藍色

3. IE7和FF的區別：
       background:orange; *background:green;
       意思指的是:Firefox瀏覽器的背景顏色是橙色,而IE7的背景顏色是綠色

4. FF，IE7，IE6的區別：
       background:orange;
       *background:green !important;
       *background:blue;
       意思是Firefox瀏覽器的的背景橙色,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,盡量使用比較簡單的方法去解決.