最近IE推出了IE8之後，想必不少人為了畫面呈現的問題抓破腦袋，在這邊我提供一個簡單的範例給大家參考看看，一方面也是幫自己做個筆記囉。

一般來說，我較常用的CSS寫法通常是先寫大家都一樣的，之後再寫不同的去覆蓋掉前面的設定，舉個例子來看

現在有一段文字，我希望他能在不同瀏覽器呈現不同的色彩，那麼我會這樣寫

HTML內容如下

<p>這是一段文字<p>

CSS則是像下面這樣

p {
    color:#F00;  /*FF & 所有 IE*/
    color:#FF0\9;  /*所有 IE*/
    *color:#0F0;  /*IE7 IE6*/
    _color:#00F;  /*只有IE6*/
}

就像是上面所看到的，如果你是用是Firefox來看這個網頁，那網頁文字的顏色就會是紅色的，IE8則是黃色，IE7則會看到綠色的字，而IE6看到的卻會是藍色的字。

這裡所見到最特殊的大概就是IE8要用到\9的寫法了，這個寫法能讓所有的IE都讀得到，Firefox卻讀不到，這樣就能很簡單的區隔出IE與Firefox的差異，之後我們再使用每個不同IE版本中所支援的CSS差異來解決畫面上的差異即可囉。

在這邊使用的IE8是正式版本 (8.0.6001.18702版)，測試版本的CSS Hack 我就不寫了，測試版本沒啥意思~這裡使用到最簡單的做法就是直接在一個class中就寫完全部的差異了，這樣修正起來快多了，也可縮減CSS檔案的大小，唯獨就是無法通過W3C的檢驗，但是這一點我是不在意啦~畢竟沒多少人會去掛那個標章，而修正的順序記得要依照Firefox → IE8 → IE7 → IE6 的順序喔~

此篇同步發表於---壞掉的印表機 設計、生活、態度 非經同意，請勿任意轉載

加入書籤：