CSS Hack 相容瀏覽器經驗分享

文章目錄

• 開發平台的選擇
• Hack 的順序
• Hack 的方法

　　（本文轉自： http://www.neoease.com/css-browser-hack/）

 

由於 Firefox 的崛起和 IE 兄弟們的各自為政, CSS Hack 再次得到網頁製作人員的重視. 相容瀏覽器對初學者來說絕對是一個苦活, 我的一些朋友就是因為煩這個沒能堅持下來, 很是可惜.

目前我的機器上已經安裝了 8 款瀏覽器, 聽說 IE8 要發布了, 真叫人驚心動魄. 這不, 以後又多一個標準要相容了, 感謝微軟給我增加工作負擔.  玩 WordPress 有一年多了, 做了很多主題, 自己從中也總結了一點心得體會, 在惡魔來世之前總結一下方便以後使用, 同時分享出來希望對初學者會有所協助.

 

開發平台的選擇

我很幸運, 我接觸網頁前台的時候 Firefox2 已經十分紅火, 我的所有工作都是在 Firefox 上展開, 同時相容其他瀏覽器的. 這樣做肯定會比在 IE 做好再到別的瀏覽器安全色來得容易, 因為 IE 對老標準支援還是很不錯的, 而 IE 的一些特有功能人家卻不支援. 所以我推薦以 Firefox 結合 Firebug 擴充作為平台.

Hack 的順序

使用 Firefox 作為平台, 只要代碼寫得夠標準, 其實要 Hack 的地方不會很多的, IE 以外的瀏覽器幾乎都不會有問題, 所以可以暫時忽略, 順序如下:
Firefox -> IE6 -> IE7 -> 其他

Hack 的方法

說到方法有兩種, 一種是在不同檔案中處理, 另一種則是在同一個檔案中處理. 其實作用是相同的, 只是出發點不一樣而已.

1. 同一檔案中處理.
如: id="bgcolor" 的控制項要在 IE6 中顯示藍色, IE7 中顯示綠色, Firefox 等其他瀏覽器中顯示紅色.

#bgcolor {    background:red !important; /* Firefox 等其他瀏覽器 */    background:blue; /* IE6 */}*+html #bgcolor {    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 引入, > 過濾等等方法, 但以上就是我用過的全部.

網頁前台的相容不應該僅限於對過去的瀏覽器支援 (向前相容), 更應該對未來的瀏覽器服務 (向後相容). 因為瀏覽器的發展很快, 而經常上網的人更新軟體的頻率是非常高的, 所以向後相容的意義甚至比先前相容還來得重要. 如何向後相容呢? 只要符合標準你的網站就永遠不會過時 (IE 系列除外). 所以我的宗旨是盡量做到標準, 不得已才 Hack, 並盡量使用比較簡單的方法去解決.