2009年5月20日 星期三

[教學]超簡單 IE8 CSS hack + 所有瀏覽器一次解決

最近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 的順序喔~

2 則留言:

Ethan 提到...

喔 感謝您ㄚ~~~~
最近 開始學習css,
並苦於跨瀏覽器的不同而傷腦筋.

透過搜尋 來到您這,真是 收穫豐富ㄚ

如此間單易懂的 hack 寫法,真的太讚啦 ^^

在此 特地您致謝

謝謝你 ^^

壞掉的印表機 提到...

To: Ethan
呵呵~謝謝你的回應,後面有時間的話會寫更多CSS的應用技巧,歡迎多來逛逛喔