css中hack有多少種表現形式

這篇文章主要介紹了css中hack有多少種表現形式，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

1、條件注釋法。是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]-->

2、類內屬性前綴法，屬性前綴法是在CSS風格屬性名稱之前添加一些hack前綴。

只有特定瀏覽器才能識別，以達到預期的頁面顯示效果。

/* CSS屬性級Hack */
color:red; /* 所有瀏覽器可識別*/
_color:red; /* 僅IE6 識別 */
*color:red; /* IE6、IE7 識別 */
+color:red; /* IE6、IE7 識別 */
*+color:red; /* IE6、IE7 識別 */
[color:red; /* IE6、IE7 識別 */
color:red9; /* IE6、IE7、IE8、IE9 識別 */
color:red; /* IE8、IE9 識別*/
color:red!important; /* IE6 不識別!important*/

3、選擇器前綴法，針對某些頁面表現不一致或需要特殊處理的瀏覽器。

在CSS選擇器之前，添加一些只有特定瀏覽器才能識別的前綴。

/* CSS選擇符級Hack */
*html #demo { color:red;} /* 僅IE6 識別 */
*+html #demo { color:red;} /* 僅IE7 識別 */
:root #demo { color:red9; } : /* 僅IE9識別 */
body:nth-of-type(1) #demo { color:red;} /* IE9+、FF3.5+、Chrome、Safari、Opera 可以識別 */
head:first-child+body #demo { color:red; } /* IE7+、FF、Chrome、Safari、Opera 可以識別 */

感謝你能夠認真閱讀完這篇文章，希望小編分享的“css中hack有多少種表現形式”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!