CSS應用實例(2)-支援不同瀏覽器

在撰寫CSS時最令人討厭的地方,就是在不同瀏覽器下看到的結果會不一樣。尤其是IE系列的瀏覽器,它們獨樹一格。因此在撰寫CSS時,最好在完成設計後,用不同的瀏覽器檢查一次,看有沒有跑掉的地方。為了要讓不同瀏覽器的使用者順利閱讀網頁,有二個基本的原則最好掌握住:

  1. 在每個網頁中加入 DOCTYPE 宣告,詳情請參考XHTML架構與準則
    1. 檢查不同瀏覽器,並且對CSS做細部微調。

CSS微調的方式,是利用在語法中加入特殊字元,使不同的瀏覽器”看”到不同的結果。以下透過範例說明:

body {
    background:red;     /* 標準語法 */

    background:green\9;     /* IE6以上版本 */

    *background:blue;       /* IE6、7 */

    _background:black;      /* IE6 */

    background:white !important;    /* IE6以上版本,及非IE系列 */
}
:root body {
    background:yellow\9;        /* IE9以上版本 */
}

大部份的瀏覽器都是支援標準CSS,所以只要按照一般語法輸入即可。當非IE系列的瀏覽器(如Firefox、Google Chrome、Opera、Safari等)讀到第 4 行時,因為它們看不懂「\9」,所以不會執行。程式後面的註解是指能夠解讀的瀏覽器。第 6 行的「*」、第 8 行的「_」都是一樣的道理,用這種方式就可以區分IE以及其它的瀏覽器。

12~14 行是針對 IE9 的調整。因為 IE8 以下看不懂 :root 選擇器,配合只有 IE 系列看得懂的 \9,使這段程式碼只有 IE9 以上會執行。

網路上也有很多這樣的微調說明,不過有一些卻和我測式的結果不同。例如”聽說”當非IE瀏覽器讀到第4行時,因為看不懂,所以下面的語法就”全部”不會執行,但是當我將這段CSS用Firefox、Google Chrome、Opera、Safari四種瀏覽器開啟時,它們清一色是顯示”白色”,也就是它們跳過第4~10行,直接執行第12行。這也有可能是因為瀏覽器版本更新,導致會有出現這種差異。

一個CSS要分這麼多種版本也是很麻煩的,所以我會建議只要區分IE與非IE的版本即可。

聲明:上述程式碼是參考書本及網路,我本身並沒有全部測式過,如果有錯誤的地方請指正,或請熱心的網友補充。

測式環境:IE6、IE8、IE9、Firefox 3.6、Google Chrome 10、Opera 11、Safari 5

補充資料:维基百科:瀏覽器引擎CSS支援比較