星期四, 9月 01, 2011

IE的CSS hack

這篇文章寫的就非常清楚了,這邊節錄一下我覺得比較常用的:

(以下皆節錄於: http://sofree.cc/ie6-ie7-ie8-firefox-css-hack/ )


區別IE和Firefox

【辨識符號】:「\9
【範例練習】:
#tip {
background:blue; /*Firefox 背景變藍色*/
background:red \9; /*IE6、IE7、IE8背景變紅色*/
}
【說明】:因為IE瀏覽器看得懂「\9」,但是非IE的瀏覽器一律看不懂,因此就可以用這個語法來區分IE和Firefox(非IE瀏覽器,像是Opera、Google Chrome、Safari等),因此以上CSS範例中,非IE瀏覽器是顯示藍色背景,IE系列瀏覽器是顯示紅色背景。




區別IE6、IE7、Firefox (方法 1)

【辨識符號】:「*」、「_
【範例練習】:
#tip {
background:blue; /*Firefox背景變藍色*/
*background:black; /*IE7 背景變黑色*/
_background:orange; /*IE6 背景變橘色*/
}
【說明】:IE7和IE6可讀「*」(米字號),IE6又可以讀「_」(底線),但是IE7卻無法讀取「_」,至於Firefox(非IE瀏覽器)則完全無法辨識「*」和「_」,因此就可以透過這樣的差異性來區分IE6、IE7、Firefox,

區別IE6、IE7、IE8、Firefox

【辨識符號】:「\9」、「*」、「_
【範例練習】:
#tip {
background:blue; /*Firefox 背景變藍色*/
background:red \9; /*IE8 背景變紅色*/
*background:black; /*IE7 背景變黑色*/
_background:orange; /*IE6 背景變橘色*/
}
【說明】:因為IE系列瀏覽器可讀「\9」,而IE6和IE7可讀「*」(米字號),另外IE6可辨識「_」(底線),因此可以依照順序寫下來,就會讓瀏覽器正確的讀取到自己看得懂得CSS語法,所以就可以有效區分IE各版本和非IE瀏覽器(像是Firefox、Opera、Google Chrome、Safari等)。

沒有留言:

張貼留言