css hack

屬性前綴

_僅支持ie6

* ie6 ie7

\9 ie6+

\0 ie8+

\9\0 ie9+

color:#00F\0; /* IE8支持*/

*color:#FF0; /* IE7支持 */

_color:#F00; /* IE6支持 */

不論是什麼方法，書寫的順序都是firefox的寫在前面，IE7的寫在中間，IE6的寫在最後面。

補充：IE6能識別 *，但不能識別 !important,IE7能識別 *，也能識別!important;FF不能識別 *，但能識別!important;下劃線」_「,IE6支持下劃線，IE7和firefox均不支持下劃線[1]   。

選擇器前綴法(即選擇器Hack)：例如 IE6能識別*html .class{}，IE7能識別*+html .class{}

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；

 

以: " #demo {width:100px;} "爲例;

#demo {width:100px;} /*被FIREFOX,IE6,IE7執行.*/

* html #demo {width:120px;} /*會被IE6執行,以前的定義會被後來的覆蓋,因此#demo的寬度在IE6就爲120px; */

*+html #demo {width:130px;} /*會被IE7執行*/

因此最後,#demo的寬度在三個瀏覽器的解釋爲: FIREFOX:100px; ie6:120px; ie7:130px;

 

.title{ height:200px;

*height:200px !important;/*由於ie6不支持！important ,因此只識別ie7*/

*height:200px; }/*識別ie6*/

條件註釋法

　

這種方式是IE瀏覽器專有的Hack方式，微軟官方推薦使用的hack方式。舉例以下

	只在IE下生效
	<!--[if IE]>
	這段文字只在IE瀏覽器顯示
	<![endif]-->
	
	只在IE6下生效
	<!--[if IE 6]>
	這段文字只在IE6瀏覽器顯示
	<![endif]-->
	
	只在IE6以上版本生效
	<!--[if gte IE 6]>
	這段文字只在IE6以上(包括)版本IE瀏覽器顯示
	<![endif]-->
	
	只在IE8上不生效
	<!--[if ! IE 8]>
	這段文字在非IE8瀏覽器顯示
	<![endif]-->
	
	非IE瀏覽器生效
	<!--[if !IE]>
	這段文字只在非IE瀏覽器顯示
	<![endif]-->