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!

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