#divcss5{ background:blue; /*非IE 背景藍色*/ background:red \9; /*IE六、IE七、IE8背景紅色*/ } |
2.區別IE6,IE7,IE8,FF CSS HACK
【區別符號】:「\9」、「*」、「_」
【示例】: css
#divcss5{ 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等)。 html
3.區別IE六、IE七、Firefox (EXP 1)
【區別符號】:「*」、「_」
【示例】: web
#divcss5{ background:blue; /*Firefox背景變藍色*/ *background:black; /*IE7 背景變黑色*/ _background:orange; /*IE6 背景變橘色*/ } |
【說明】:IE7和IE6可讀「*」(米字號),IE6又能夠讀「_」(底線),可是IE7卻沒法讀取「_」,至於Firefox(非IE瀏覽器)則徹底沒法辨識「*」和「_」,所以就能夠透過這樣的差別性來區分IE六、IE七、Firefox chrome
4.區別IE六、IE七、Firefox (EXP 2)
【區別符號】:「*」、「!important」
【示例】: windows
#divcss5{ background:blue; /*Firefox 背景變藍色*/ *background:green !important; /*IE7 背景變綠色*/ *background:orange; /*IE6 背景變橘色*/ } |
【說明】:IE7能夠辨識「*」和「!important」,可是IE6只能夠辨識「*」,卻沒法辨識「!important」,至於Firefox能夠讀取「!important」但不能辨識「*」所以能夠透過這樣的差別來有效區隔IE六、IE七、Firefox。 瀏覽器
5.區別IE七、Firefox
【區別符號】:「*」、「!important」
【示例】: 測試
#divcss5{ background:blue; /*Firefox 背景變藍色*/ *background:green !important; /*IE7 背景變綠色*/ } |
6.區別IE六、IE7 (EXP 1)
【區別符號】:「*」、「_」
【示例】: url
#tip { *background:black; /*IE7 背景變黑色*/ _background:orange; /*IE6 背景變橘色*/ } |
【說明】:IE7和IE6均可以辨識「*」(米字號),但IE6能夠辨識「_」(底線),IE7卻沒法辨識,透過IE7沒法讀取「_」的特性就能輕鬆區隔IE6和IE7之間的差別。 spa
7.區別IE六、IE7 (EXP 2)
【區別符號】:「!important」
【示例】: firefox
#divcss5{ background:black !important; /*IE7 背景變黑色*/ background:orange; /*IE6 背景變橘色*/ } |
【說明】:由於IE7可讀取「!important;」但IE6卻不行,而CSS的讀取步驟是從上到下,所以IE6讀取時因沒法辨識「!important」而直接跳到下一行讀取CSS,因此背景色會呈現橘色。
8.區別IE六、Firefox
【區別符號】:「_」
【示例】:
#divcss5{ background:black; /*Firefox 背景變黑色*/ _background:orange; /*IE6 背景變橘色*/ } |
【說明】:由於IE6能夠辨識「_」(底線),可是Firefox卻不行,所以能夠透過這樣的差別來區隔Firefox和IE6,有效達成CSS hack。
盒模型解決方法
IE的if條件Hack
總結如下HACK書寫方法:
瀏覽器:僅限IE6+,FF,Safari,Chrome,Opera;(截止到2011.10.12非IE均爲最新版本)。
測試環境:windows系統;(FF : firefox; OP : opera; SA : safari; CH : chrome; Y表明支持,N表明不支持。)
標誌符 | 示例 | IE6 | IE7 | IE8 | IE9 | FF | OP | SA | CH |
---|---|---|---|---|---|---|---|---|---|
* | .eq {*color:#000;} | Y | Y | N | N | N | N | N | N |
_ | .eq {_color:#000;} | Y | N | N | N | N | N | N | N |
+ | .eq {+color:#000;} | Y | Y | N | N | N | N | N | N |
- | .eq {-color:#000;} | Y | N | N | N | N | N | N | N |
> | .eq {>color:#000;} | Y | Y | N | N | N | N | N | N |
\0 | .eq {color:#000\0;} | N | N | Y | Y | N | Y | N | N |
\9 | .eq {color:#000\9;} | Y | Y | Y | Y | N | N | N | N |
\9\0 | .eq {color:#000\0;} | N | N | N\Y | Y | N | N | N | N |
:root .xx{xxx:xxx\9;} | :root .eq {color:#a00\9;} | N | N | N | Y | N | N | N | N |
*+ | .eq {*+color:#000;} | Y | Y | N | N | N | N | N | N |
*- | .eq {*-color:#000;} | Y | N | N | N | N | N | N | N |
*html | *html .eq {color:#000;} | Y | N | N | N | N | N | N | N |
*+html | *+html .eq {color:#000;} | N | Y | N | N | N | N | N | N |
html* | html* .eq {color:#000;} | Y | Y | N | N | N | N | N | N |
[; | .eq {color:red;[;color:blue;} | Y | Y | N | N | N | N | Y | Y |
html>body | html>body .eq {color:blue;} | N | Y | Y | Y | Y | Y | Y | Y |
html>/**/body | html>/**/body .eq {color:blue;} | N | N | Y | Y | Y | Y | Y | Y |
html/**/>body | html/**/>body .eq {color:blue;} | N | Y | Y | Y | Y | Y | Y | Y |
@media all and (min-width:0px){} | @media all and (min-width:0px){.eq {color:#000;}} | N | N | N | Y | Y | Y | Y | Y |
*:first-child+html | *:first-child+html .eq {color:blue;} | N | Y | N | N | N | N | N | N |
*:first-child+html{} *html | *:first-child+html{} *html .eq {color:blue;} | Y | N | N | N | N | N | N | N |
@-moz-document url-prefix(){} | @-moz-document url-prefix(){ .eq {color:blue;}} | N | N | N | N | Y | N | N | N |
@media screen and (-webkit-min-device-pixel-ratio:0){} | @media screen and (-webkit-min-device-pixel-ratio:0){.eq {color:blue;}} | N | N | N | N | N | N | Y | Y |
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0){} | @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0){.eq {color:blue;}} | N | N | N | N | N | Y | N | N |
body:nth-of-type(1) | body:nth-of-type(1) .eq {color:blue;} | N | N | N | Y | Y | Y | Y | Y |
注意事項:
一、因爲各瀏覽器更新神速,因此有些HACK可能會有變化,因此請你們注意。
二、[;此種方式會影響後續樣式,不可取。
三、\9\0並不是對全部屬性都能區分IE8和IE9。好比:background-color能夠,但background不能夠,還有border也不能夠。因此在實際用時要測試下。
四、當同時出現\0,*,_,時,推薦將\0寫在*和_前面。例如:color:red\0;*color:blue;_color:green;可行,不然IE7和IE6裏的效果會失效。但border例外,放在先後均可以。保險起見,仍是放在前面。
書寫方法一:
IE6 hack
_background-color:#CDCDCD; /* ie 6*/
IE7 hack
*background-color:#dddd00; /* ie 7*/
IE8 hack
background-color:red \0; /* ie 8/9*/
IE9 hack
background-color:blue \9\0;
火狐,遨遊,及其它高級瀏覽器通用
background-color:red!important;
注意寫hack的順序,其中:
background-color:red\0;IE8和IE9都支持;background-color:blue\9\0; 僅IE9支持;
另外,background-color:#eeeeee\9;的HACK支持IE6-IE8,可是IE8不能識別「*」和「_」的CSS HACK。
可綜合上述規律靈活應用。
書寫方法二:
#element {color:orange;}
#element {*color: white; } /* IE6+7, doesn't work in IE8/9 as IE7 */
#element {_color: red; } /* IE6 */
#element {color: green\0/IE8+9; } /* IE8+9 */
:root #element { color:pink \0/IE9; } /* IE9 */
IE9 和 IE8 以及其餘版本的區別說明
background-color:blue; 各個瀏覽器都認識,這裏給firefox用;
background-color:red\9;\9全部的ie瀏覽器可識別;
background-color:yellow\0; \0 是留給ie8的,最新版opera也認識,後面自有hack寫了給opera認的,因此,\0咱們就認爲是給ie8留的;
+background-color:pink; + ie7定了;
_background-color:orange; _專門留給神奇的ie6;
:root #test { background-color:purple\9; } :root是給ie9的,網上流傳了個版本是 :root #test { background- color:purple\0;},這個,新版opera也認識,因此經筆者反覆驗證最終ie9特有的爲:root 選擇符 {屬性\9;}
@media all and (min-width:0px){ #test {background-color:black\0;} } 這個是總是跟ie搶着認\0的神奇的opera,必須加個\0,否則firefox,chrome,safari也都認識。。。