CSS Hack 瀏覽器安全色寫法 用法

CSS Hack 不得不在一些項目中運用到。jquery部落格也遇上了，關於二次開發的一個3D地圖，其實也想好好寫代碼相容，苦於上頭要東西，短期不可能實現，沒法子，迴歸css hack 吧。
為了調試尼瑪的3D地圖，不得不安裝了IE9，搭配著IEtest方便照顧IE全家。firefox chrome safari opera
Hack 的順序
一般使用 Firefox 作為平台, 只要代碼寫得夠標準, 其實要 Hack 的地方不會很多的, IE 以外的瀏覽器幾乎都不會有問題, 所以可以暫時忽略, 順序如下:
Firefox -> IE6 -> IE7 -> 其他
Hack 的用法
說到方法有兩種, 一種是在不同檔案中處理, 另一種則是在同一個檔案中處理. 其實作用是相同的, 只是出發點不一樣而已.
1. 同一檔案中處理.
如: id=”bg” 的控制項要在 IE6 中顯示藍色, IE7 中顯示綠色, Firefox 等其他瀏覽器中顯示紅色.
#bg {
background:red !important; /* Firefox 等其他瀏覽器 */
background:blue; /* IE6 */
}
*+html #bg {
background:green !important; /* IE7 */
}
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;) 放到另一個檔案中, 再用下面的方法匯入.
<!– 放置所有瀏覽器的樣式 –>
<link rel=”stylesheet” href=”style.css” type=”text/css” />
<!– 只放置 IE 必須的, 而不能通過 W3C 的代碼 –>
<!–[if IE]>
<link rel=”stylesheet” href=”style_ie.css” type=”text/css” />
<![endif]–>
瀏覽器的 CSS Hack 方法有很多, 比如 @import 引入, > 過濾等等方法, 但以上就是我用過的全部.
頁面的相容不應該僅限於對過去的瀏覽器支援 (向前相容), 更應該對未來的瀏覽器服務 (向後相容). 因為瀏覽器的發展很快, 三天兩頭的更新，瞧瞧Google Firefox都爭相的升，真是一個汗字了得。So,我們盡量做到標準, 不得已才 Hack, 並盡量使用比較簡單的方法去解決.
最後讓我們一起抵制IE6，如果周圍朋友客戶有用IE6的，親你看到的話幫忙請升級下。Let’s f u c k IE6,Thanks!

轉自 jquery http://www.jqueryba.com/280.html