CSS Hacks

分不清什麼叫瀏覽器的人,理所當然也不會知道什麼是CSS Hacks

然而,對所有從事網頁設計工作的人來說,CSS Hacks就是:當你設計完成之後,必須額外再耗費兩三倍時間,去努力追求所有瀏覽器間最小失真的反覆調校機械動作。

很多人,尤其是你的客戶、老闆、主管跟同事,完全無法理解或乾脆漠視CSS Hacks這個設計工作環節,也經常使得專業網頁設計工作愈形艱難。

從CSS Hacks的觀點來看,網路愈來愈進步,同時,也愈來愈沈淪。

換句話說,當今這個多元瀏覽器齊發並存的年代,是一個最好也最壞的年代。

這一點,尤其在IE6還在死撐,IE8加入戰局之後,愈發明顯。

如果,直接讓IE8模擬IE7的作法,無法完全滿足你的設計需求。

也許可以參考以下我整理出來的「FireFox, IE6, IE7, IE8 CSS Hacks」寫法:

.jas9{ color: #000 }/* 給所有明門正派的瀏覽器 */

.jas9{ color: red\9 }/* 給IE所有版本 */

.jas9{ color /*\**/: orange\9 }/* 給IE8 (IE7&IE8能讀) */

.jas9{ *color: yellow}/* 給IE7 (IE6&IE7能讀) */

.jas9{ _color: green }/* 給IE6 (僅IE6能讀) */

實測Demo如下:

預設:黑色;未指定寫法的所有IE:紅色;IE8:橙色;IE7:黃色;IE6:綠色

如果你只需要區別「FireFox」跟「IE」,就只要使用「給所有明門正派的瀏覽器」跟「給IE所有版本 」。

如果你需要區別「FireFox」、「IE6」跟「IE7 IE8」,就只要使用「給所有明門正派的瀏覽器」「給IE所有版本 」跟「給IE8 (IE7&IE8能讀)」。

如果要分別指定不同宣告值,就用「給所有明門正派的瀏覽器」「給IE8 (IE7&IE8能讀)」「給IE7 (IE6&IE7能讀) 」跟「給IE6 (僅IE6能讀)」。

由於繼承的關係,CSS Hacks進行時,也要注意其間的順序問題。

1 留言

Wabi-Sabi寫道…
哈哈,真得是很傷神呀
較新的 較舊