經常使用的css hack介紹

CSS Hack常見的有三種形式:CSS屬性Hack、CSS選擇符Hack以及IE條件註釋Hack, Hack主要針對IE瀏覽器。html

 1 /* CSS屬性級Hack */
 2 color:red; /* 全部瀏覽器可識別*/
 3 _color:red; /* 僅IE6 識別 */
 4 *color:red; /* IE六、IE7 識別 */
 5 +color:red; /* IE六、IE7 識別 */
 6 *+color:red; /* IE六、IE7 識別 */
 7 [color:red; /* IE六、IE7 識別 */
 8 color:red\9; /* IE六、IE七、IE八、IE9 識別 */
 9 color:red\0; /* IE八、IE9 識別*/
10 color:red\9\0; /* 僅IE9識別 */
11 color:red \0; /* 僅IE9識別 */
12 color:red!important; /* IE6 不識別!important*/
13 -------------------------------------------------------------
14 /* CSS選擇符級Hack */
15 *html #demo { color:red;} /* 僅IE6 識別 */
16 *+html #demo { color:red;} /* 僅IE7 識別 */
17 body:nth-of-type(1) #demo { color:red;} /* IE9+、FF3.5+、Chrome、Safari、Opera 能夠識別 */
18 head:first-child+body #demo { color:red; } /* IE7+、FF、Chrome、Safari、Opera 能夠識別 */
19 :root #demo { color:red\9; } : /* 僅IE9識別 */
20 --------------------------------------------------------------
21 /* IE條件註釋Hack */
22 <!--[if IE]>此處內容只有IE可見<![endif]--> 
23 <!--[if IE 6]>此處內容只有IE6.0可見<![endif]--> 
24 <!--[if IE 7]>此處內容只有IE7.0可見<![endif]--> 
25 <!--[if !IE 7]>此處內容只有IE7不能識別,其餘版本都能識別,固然要在IE5以上。<![endif]-->
26 <!--[if gt IE 6]> IE6以上版本可識別,IE6沒法識別 <![endif]-->
27 <!--[if gte IE 7]> IE7以及IE7以上版本可識別 <![endif]-->
28 <!--[if lt IE 7]> 低於IE7的版本才能識別,IE7沒法識別。 <![endif]-->
29 <!--[if lte IE 7]> IE7以及IE7如下版本可識別<![endif]-->
30 <!--[if !IE]>此處內容只有非IE可見<![endif]-->

相關文章
相關標籤/搜索