[ CSS網頁裝潢學 ] 跨瀏覽器CSS Hack設定之一 / 最簡易的hack方式

Technorati 的標籤:,,


撰寫CSS的過程中,最痛苦的往往在於最後階段的瀏覽器測試,為了在各家不同瀏覽器都能維持一定水準相同的視覺效果,常讓網頁設計們傷透腦筋,今天就介紹我最常使用也是最簡易的hack方式,利用瀏覽器判讀符號不同的支援度,來達成簡單的CSS Hack!!

目前瀏覽器的市占率主要還是以IE為大宗,大約有逼近八成左右的使用者使用IE瀏覽器(#110301/更新關於瀏覽器市佔率的數據),不過IE6等較早期的瀏覽器對CSS判讀的支援度與其他瀏覽器差距比較大,所以目前主要還是以FF為第一階段的測試瀏覽器,等CSS全部撰寫完成後再針對IE等瀏覽器做CSS設定微調。

利用以下幾個符號做區隔:
\9:IE8以下的版本皆可判讀,FF則不行
>:IE7以下的版本可判讀
_ :IE6以下的版本可以判讀 
\9>_:FireFox三者皆忽略

建立一個div,針對他在不同瀏覽器中設定不一樣的背景圖片,CSS設定如下,

CSS以讀取的順序,後讀取的設定會覆蓋疊加上先前的設定,
故切記設定順序要如下列順序,先是FF → IE8 → IE7 → IE6

.css_hack {
    /* 透過符號設定各瀏覽器不同的背景圖 */
    background-image:url(img/bg_ff.gif); /* For FireFox & Mozilla & Other Broswer */
    background-image:url(img/bg_IE8.gif)\9; /* For IE8 */
    >background-image:url(img/bg_IE7.gif); /* For IE7 */
    _background-image:url(img/bg_IE6.gif); /* For IE6 */
}

在不同瀏覽器中開啟頁面,可以看到效果如下圖,會針對各瀏覽器有不同的背景圖,
這種hack方式在一個class中就可以簡單針對不同瀏覽器做出設定,簡單又快速,是我最常用的方式。

browser

#110301/補上瀏覽器今日市佔率數據
我是參考StatCounter Global Stats 這個網站的調查數據,今日的瀏覽器市佔率分布如下圖,可以看到Chrom出現後瓜分了一小部分的市場,目前IE市佔約莫接近五成,FF火狐三成,Chrom一成。
2011-03-01_144109

範例網頁 / cross_browser_hack.htm

btn_downloadcross_browser_hack.zip


關連文章

Comments

# re: [ css網頁裝潢學 ] 跨瀏覽器CSS Hack設定之一 / 最簡易的hack方式
Posted by pou on 2011/1/27 上午 09:13 回覆

謝謝指導!! 又學到一個經驗!!^^

# re: [ css網頁裝潢學 ] 跨瀏覽器CSS Hack設定之一 / 最簡易的hack方式
Posted by 米雪兔 on 2011/1/27 上午 09:51 回覆

to pou : 不客氣!

# re: [ CSS網頁裝潢學 ] 跨瀏覽器CSS Hack設定之一 / 最簡易的hack方式
Posted by 聽.風 on 2011/3/1 上午 02:40 回覆
原來還可以這樣子用!
話說現在IE市佔率好像只剩6成?
# re: [ CSS網頁裝潢學 ] 跨瀏覽器CSS Hack設定之一 / 最簡易的hack方式
Posted by 風痕影 on 2011/3/1 上午 03:36 回覆
米雪兔您好 >w<

我覺得...或許可以把 "以前" 這兩個字改成其他說法
不然感覺會被誤以為那幾個版本本身不認得那種寫法 @@...
# re: [ CSS網頁裝潢學 ] 跨瀏覽器CSS Hack設定之一 / 最簡易的hack方式
Posted by 米雪兔 on 2011/3/1 上午 11:12 回覆

to 風痕影 : 感謝:D!!!

 

# re: [ CSS網頁裝潢學 ] 跨瀏覽器CSS Hack設定之一 / 最簡易的hack方式
Posted by 米雪兔 on 2011/3/1 下午 03:33 回覆

to 聽.風 :
剛剛查了一下,全球IE佔比約莫五成,亞洲區則是接近六成!!!感謝你的分享!!!!

# re: [ CSS網頁裝潢學 ] 跨瀏覽器CSS Hack設定之一 / 最簡易的hack方式
Posted by 吉兒普 on 2011/7/7 下午 04:39 回覆
獲益良多,謝謝 ^^

回應

Title *
Name *
Email (將不會被顯示)
Url
Comment *

登入後使用進階評論

Please add 3 and 1 and type the answer here: