2009/01/23

CSS hack 單一特徵

單一特徵 | 區塊 | 註解條件式

寫 HTML, CSS 最傷腦筋的就是:不同的瀏覽器,展現的效果常有差異。這裡只舉一例,childNodes 的差異;這差異會使得展現出來的高度不同,尤其是加了不同的背景色時最為明顯;對一般技術性的網站可能不重要,但是對美工設計的網站,統一性與美感就差了些。瀏覽器各有使用者,例如 Firefox 有將近 20% 的佔有率,以台灣人口來算,約有四百萬人。筆者原本用的是 IE8,想想 IE8 都出來了,IE6 該絕跡了吧;後來筆者由來訪者的統計資料中發現 IE6, IE7 可是大戶,學校中的老舊電腦,都還是跑著 IE6。所以跨瀏覽器的技術就變的重要了。有很多方法可以調整不同瀏覽器的差異,在此處講的是用於 CSS 的調整法。CSS hack 主要是利用瀏覽器的錯誤來作分別,此法的缺點是,錯誤有可能在未來更正。

*

IE 由於程式錯誤,在特徵前加非字母數字字元(non-alphanumeric characters),依然會被成功解讀,例如 *width 還是會被解讀成 width;但是在 Firefox, Safari, Chrome 會認出此錯誤,而忽略其設定。

_ 與 -

延續上面的錯誤,但是 IE7 更正了”_”與”-”兩項錯誤。所以可以用”_”與”-”分別 IE6 與 IE7。此法無法通過認證,建議改用 !important 。下面所有的範例依循兩個原則:(一)後宣告的值會蓋過先宣告的值。(二)解讀失敗的宣告會被忽略。

!ie

在放置 !important 的地方,如果你放了 !anyword(通常用 !ie),IE7(及以下版本)依然會解讀;但是在 Firefox, Safari, Chrome 會認出此錯誤,而忽略其設定。

!important 與 !important!

請參考 !important 與 !important!的應用。!important 可用在 hack min-height