IE六、IE七、IE八、Firefox兼容性CSS HACK問題

通俗地講:CSS Hack指各版本及各品牌瀏覽器之間對CSS解釋後出現網頁內容的兼容bug偏差(好比咱們常說錯位)的處理。 因爲各瀏覽器的內核不一樣,因此會形成一些偏差就像JS同樣,一個JS網頁特效,在微軟IE六、IE七、IE8瀏覽器有效果,但可能在火狐(Mozilla Firefox)谷歌瀏覽器無效,這樣就叫作JS Hack ,因此咱們對於CSS來講他們來解決各瀏覽器對CSS解釋不一樣所採起的區別不一樣瀏覽器製做不一樣的CSS樣式的設置來解決這些問題就叫做CSS Hack。  
 

1.區別IE和非IE瀏覽器CSS HACK代碼
 #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 背景變綠色*/
}


【說明】:由於Firefox能夠辨識「!important」但卻沒法辨識「*」,而IE7則能夠同時看懂「*」、「!important」,所以能夠兩個辨識符號來區隔IE7和Firefox。

 

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。

 


盒模型解決方法

selct {width:IE5.x寬度; voice-family :"\"} \""; voice-family:inherit; width:正確寬度;}
盒模型的清除方法不是經過!important來處理的。這點要明確。

截字省略號
select { -o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; }
這個是在越出長度後會自行的截掉多出部分的文字,並以省略號結尾,很好的一個技術。只是目前Firefox並不支持。

IE的if條件Hack

<!--[if IE]> Only IE <![endif]-->
全部的IE可識別
<!--[if IE 5.0]> Only IE 5.0 <![endif]-->
只有IE5.0能夠識別
<!--[if gt IE 5.0]> Only IE 5.0+ <![endif]-->
IE5.0包換IE5.5均可以識別
<!--[if lt IE 6]> Only IE 6- <![endif]-->
僅IE6可識別
<!--[if gte IE 6]> Only IE 6/+ <![endif]-->
IE6以及IE6如下的IE5.x均可識別
<!--[if lte IE 7]> Only IE 7/- <![endif]-->
僅IE7可識別
 
以上包括了IE6\IE8\IE7\火狐瀏覽器兼容問題及解決方法。



總結如下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也都認識。。。

@media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} }最後這個是瀏覽器新貴chrome和safari的
遇到的問題:

問題一:
在谷歌下: 


在IE8下:
 
解決方法:給input設置line-height:30px\9(all IE)
line-height:30px\0(IE8+)
陸續更新中。。。。
相關文章
相關標籤/搜索