拷貝自大陸網站
http://www.xmlasp.net/n1846c40.aspx


如果在設計CSS方面,你在Firefox與IE顯示有很大問題時候,
可以好好看一下,了不起就是,為了不同核心瀏覽器都寫一份CSS囉。
不過比較擔心就是在W3C驗證部份會不會不過,哈哈,這樣就不夠
「標準」啦~~~

區別不同瀏覽器的CSS hack寫法:

區別IE6與FF:
       background:orange;*background:blue;

區別IE6與IE7:
       background:green !important;background:blue;

區別IE7與FF:
       background:orange; *background:green;

區別FF,IE7,IE6:
       background:orange;*background:green !important;*background:blue;

注:IE都能識別*;標準瀏覽器(如FF)不能識別*;

IE6能識別*,但不能識別 !important,
IE7能識別*,也能識別!important;
FF不能識別*,但能識別!important;

   IE6  IE7  FF
 *  √  √  ×
 !important  ×  √  √


------------------------------------------------------
另外再補充一個,下劃線"_",
IE6支持下劃線,IE7和firefox均不支持下劃線。

于是大家還可以這樣來區分IE6,IE7,firefox
: background:orange;*background:green;_background:blue; 

注:不管是什么方法,書寫的順序都是firefox的寫在前面,IE7的寫在中間,IE6的寫在最后面。

edastyle 發表在 痞客邦 PIXNET 留言(1) 人氣()


留言列表 (1)

發表留言
  • imjoe
  • 哇~謝謝你^^

    我是CSS初學者~~~~
    之前參考PIXNET的官方樣式,
    就有看到「*」....「_」
    可是都不知道是什麼意思.....
    去了討論區問也沒人知道...囧.....
    謝謝你的文章喔^^
  • 如果有用CSS的人,又剛剛好瀏覽器放棄IE而使用Firefox的人,
    一定會發現,設計出來的東西,在IE跟Firefox出現的模樣,「不太一樣」
    尤其是關於「長度的表示」,像是同樣設定是「1mm」或是「1px」…等等,
    都會不一樣。
    然後我在前一陣子看到大量關於如何區別IE7跟IE6還有Firefox的方法,
    就是像
    width:500px;【Firefox & IE6 & IE7 都可以讀的到】
    *width:510px;【Firefox 讀不到 所以Firefox會以500px呈現,但是IE6 & IE7 會先讀取新的宣告】
    width:520px !important;【只有IE7 會讀取!important 的宣告,而IE6不讀取而呈現510px,IE7會呈現520px】

    但是,最近IE7有更新,現在也不能利用!important來做區分了。
    不過還是有人給他想出辦法來做辨識,提供你網址看看
    http://www.blueidea.com/tech/site/2006/3626.asp
    他其實是翻譯人家外國人的文章,原文
    http://www.ibloomstudios.com/articles/the_ie7_css_hack/


    但是我還是覺得,沒有美術設計的天份,要做網頁還是真的很困難,
    我是學會CSS之後才發現,美術真的是一門精深的學問啊!

    edastyle 於 2007/08/16 17:57 回覆