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 引入, > 過濾等等方法, 但以上就是我用過的全部.
頁面的兼容不應該僅限於對過去的瀏覽器支持 (向前兼容), 更應該對未來的瀏覽器服務 (向後兼容). 因爲瀏覽器的發展很快, 三天兩頭的更新，瞧瞧谷歌 火狐都爭相的升，真是一個汗字了得。So,我們儘量做到標準, 不得已才 Hack, 並儘量使用比較簡單的方法去解決.
最後讓我們一起抵制IE6，如果周圍朋友客戶有用IE6的，親你看到的話幫忙請升級下。Let’s f u c k IE6,Thanks!

轉自 [url=http://www.jqueryba.com/]jquery[/url] http://www.jqueryba.com/280.html