[CSS Hack]解決IE6、IE7、IE8、Firefox的瀏覽器相容性問題!

每次調CSS最令人頭痛的就是瀏覽器校正問題,因為每個瀏覽器對CSS的解釋都不太一樣,Firefox本身算是比較照規矩來,處理上比較簡單,但是遇到微軟的IE系列頭就大了,雖然都是IE,但是IE6、IE7、IE8各版本對CSS的解釋又不一樣,就算你本身已經在IE6調整好,但是在IE7看起來又是不一樣,這時我們就得來對各個瀏覽器設定不同的數值來解決版面移位的問題。

網路上有非常多關於CSS Hack的教學文章,當然處理方法也有很多種,接下來要跟大家說明的是屬於比較簡單的方法,但是以下的校正確無法通過W3C檢測,雖然無法通過檢測,但是針對各個瀏覽器校正確是有效的喔!

目前瀏覽器大宗還是屬於IE6的天下,這原因主要是因為XP本身內建IE6,而且很多使用者很喜歡重灌XP,因此IE6仍占走了大半的瀏覽器天下,不過隨著Windows7的出現,倒是有非常大的機會解決過氣的IE6,因為Windows7本身是內建IE8,微軟的IE8對CSS的解釋已經越來越標準,當然標準程度仍是不及Firefox

另外,如果要處理IE各版本瀏覽器的相容性問題,那一定要有各版本的IE瀏覽器可以瀏覽,但是微軟作業系統內並沒有讓多版本的IE共存,為了讓自己電腦內存在多種版本的IE瀏覽器,那就趕快下載IETester來使用吧!另外,也別忘記下載Firefox來修正網頁CSS喔!

——————————–我是分隔線——————————–

區別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、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等)。

——————————–我是分隔線——————————–

區別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、Firefox (方法 2)

【辨識符號】:「*」、「!important

【範例練習】:

#tip {

background:blue; /*Firefox 背景變藍色*/

*background:green !important; /*IE7 背景變綠色*/

*background:orange; /*IE6 背景變橘色*/

}

【說明】:IE7可以辨識「*」和「!important」,但是IE6只可以辨識「*」,卻無法辨識「!important」,至於Firefox可以讀取「!important」但不能辨識「*」因此可以透過這樣的差異來有效區隔IE6、IE7、Firefox。

區別IE7、Firefox

【辨識符號】:「*」、「!important

【範例練習】:

#tip {

background:blue; /*Firefox 背景變藍色*/

*background:green !important; /*IE7 背景變綠色*/

}

【說明】:因為Firefox可以辨識「!important」但卻無法辨識「*」,而IE7則可以同時看懂「*」、「!important」,因此可以兩個辨識符號來區隔IE7和Firefox。

——————————–我是分隔線——————————–

區別IE6、IE7 (方法 1)

【辨識符號】:「*」、「_

【範例練習】:

#tip {

*background:black; /*IE7 背景變黑色*/

_background:orange; /*IE6 背景變橘色*/

}

【說明】:IE7和IE6都可以辨識「*」(米字號),但IE6可以辨識「_」(底線),IE7卻無法辨識,透過IE7無法讀取「_」的特性就能輕鬆區隔IE6和IE7之間的差異。

區別IE6、IE7 (方法 2)

【辨識符號】:「!important

【範例練習】:

#tip {

background:black !important; /*IE7 背景變黑色*/

background:orange; /*IE6 背景變橘色*/

}

【說明】:因為IE7可讀取「!important;」但IE6卻不行,而CSS的讀取步驟是從上到下,因此IE6讀取時因無法辨識「!important」而直接跳到下一行讀取CSS,所以背景色會呈現橘色。

——————————–我是分隔線——————————–

區別IE6、Firefox

【辨識符號】:「_

【範例練習】:

#tip {

background:black; /*Firefox 背景變黑色*/

_background:orange; /*IE6 背景變橘色*/

}

【說明】:因為IE6可以辨識「_」(底線),但是Firefox卻不行,因此可以透過這樣的差異來區隔Firefox和IE6,有效達成CSS hack。

——————————–我是分隔線——————————–

關於IE6、IE7、IE8、Firefox之間的CSS Hack大概是以上那樣,如果有疏漏或是有錯誤還煩請大家指證一下囉!這些CSS Hack是我目前看過比較簡單的處理方式,當然如果你不會很在意CSS是否通過W3C的驗證,你只會在意每個用戶在不同的瀏覽器下閱讀是否可以正常的話,其實以上CSS Hack對你來說是非常好用的,因為這些CSS Hack如果善加利用確實可以正確的解決瀏覽器相容性問題。

以上的CSS Hack參照了以下幾篇文章所整理出來的,感謝以下文章的詳細說明。

  • asdf

    很全面,直接拿来用了,谢谢呵!

    香腸回應:

    :)

  • 封真‧月

    非常感謝!!

    香腸回應:

    :D

  • 那個IE Tester好用~ 這樣就不用擔心,不過調CSS對不專業的真的好難呀…

    香腸回應:
    對阿 囧

  • 感謝香腸~
    我剛剛嘗試自己解決
    沒想到成功處理完畢^^
    真的很謝謝你喔^^

    香腸回應:
    不會啦~恭喜!

  • 回樓上,對! 對我們這些網頁開發者來說,IE實在是個惡夢……. =.=

    香腸回應:
    期待IE9….

  • 這篇文章實在寫的太讚了!!! 推!推!推!推!推!推!推!推!推!推!推!推!推!推!推!推!推!推!推!推!推!推!推!推!推!推!推!推!推!推!推!推!推!推!推!推!推!推!推!推!推!推!推!推!推!推!推!推!推!推!推!推!推!推!推!推!推!推!推!推!推!推!推!推!推!推!推!推!推!推!推!推!推!推!推!推!推!推!推!推!推!推!推!推!推!推!推!推!推!推!推!推!推!推!推!推!推!推!推!推!推!推!推!推!推!推!推!推!推!推!推!推!推!推!推!推!推!推!推!推!推!推!推!推!推!推!推!推!推!

    借我轉載一下~~ XD

    香腸回應:
    不可以喔XD
    本站文章目前不允許轉載。

  • Retsu

    提一下
    WordPress的佈景主題inove
    IE6 IE7 IE8 FireFox
    看到的效果都一樣
    可見當初設計者的頭腦應該快爆了
    佩服……………

    香腸回應:
    我記得他有做校正~

  • Retsu

    微軟做瀏覽器的功力有待加強
    一副老大的樣子(W3C才是老大)
    搞得整個網頁協定亂七八糟
    讓其他非IE瀏覽器的使用者一定要用IE就對了(IE TAB也算IE)

    香腸回應:
    嗯嗯~就是因為亂搞標準,今天才會需要這一大堆的解決方法Orz

  • IE 系列的 browsers 實在太麻煩了 !

    香腸回應:
    沒錯~

  • 不错的文章….谢了!

    香腸回應:

    :)

  • 請問有哪位高手可以解答嗎?
    新版從11/10改版上線後,從google分析系統裡觀察,明顯有舊用戶無法上到首頁的情形,不是18禁頁,是新版首頁,

    所以現在懷疑是新版首頁css的語法造成的,可是要嘛就是要全部的人無法進來,可是看數字,好像只有否些人無法進來,請技術人員也查過了,沒有發現特殊的狀況,

    請問有哪位高手可以解答!如果最後找出實際的問題,贈送100片**光碟,感謝!

    香腸回應:
    呃….本站是普通級網站….所以消音一些文字。

  • c

    IE7跟8應該不會差太多
    所以只要調IE8和Firefox就好了
    前提是配合以下邪惡的方法

    用javascript啦…XD

    alert(‘由於站長很討厭IE6, IE6也很討厭, 請立即更換為Firefox或IE新版!’);
    if(confirm(‘將根據建議下載良好的瀏覽器\n 是 – Firefox\n 否 – Internet Explorer’)){document.location.href=’http://moztw.org/’;}else{document.location.href=’http://www.microsoft.com/taiwan/windows/internet-explorer/default.aspx’;};

    話說
    半個月以前開始用Windows 7 RTM (不是還沒上市嗎?…咳
    用IE8感覺還不錯

    吸引我的原因是因為速度OK
    還有可以(這樣: 0rz.tw/Crj6R)

    香腸回應:
    呵呵~ 我還是喜歡把他們調好XD

  • 瓦斯爐

    哀…每次做網站都要花時間測試…
    ie6與ie8之間的差異就要花至少一天的時間來校正
    還不包括火狐與其他的瀏覽器
    我都搞到快起笑了….頭好痛

    香腸回應:
    沒錯!!

  • 旁是得

    香腸大大

    想起問一下,WORDPRESS的文章,頁面都會顯示全部的文字,要如何設定讓他只顯示幾句話就好了呢?又有一問,又如何像無名小站有『繼續閱讀』的功能加在文章上呢?

    是否要更換佈景才可以呢?因為我是用最原始的WORDPRESS的佈景。

    謝謝香腸大大=ˇ=

    香腸回應:
    多多爬文啦XD
    http://sofree.cc/wordpress-more-nextpage/

  • 香腸CSS功力大增了!!

    香腸回應:
    你想太多了XDD

  • 哇~~~
    香腸長大了(挺)
    CSS更強了…

    香腸回應:
    噗~沒有喔~

  • 就因為IE
    搞的我精神錯亂!!
    簡直要瘋了… XDDDD

    香腸回應:
    很多人都這樣XD

  • 我可没那么多追求,通常情况下只考虑IE7和IE8.

    香腸回應:
    IE6也要顧…XD

  • 最簡單的方法就是大家都把IE換掉就好啦。XD
    諾已經灌了正式版的Win7 旗艦版了(微軟夥伴的好處)
    在Win7中的IE8是可以獨立關閉的…所以早早就關閉了
    另外Telnet跟IIS在Win7中只需要打個勾就會自動裝好,方便許多。

    香腸回應:
    SOGA~

  • 看的我都快暈了…//S
    怎麼比寫程式還煩…
    如果要符合所有瀏覽器的話….
    先死了再說…

    香腸回應:
    還好啦XD

  • 我看不懂啦 好複雜喔

    管他的 ie給他掛八

    只解決火狐的就好 不然我看搞到最後是我掛點

    香腸回應:
    噗噗

  • *起頭當在w3c驗證時,
    會無法通過~~

    香腸回應:
    嘿阿~哇哉