什么是CSS Hack?

CSS hack是通過在CSS樣式中加入一些特殊的符號,讓不同的瀏覽器識別不同的符號,以達到應用不同的CSS樣式的目的。

Hack一般分為三種:條件Hack、屬性級Hack、選擇符Hack

條件Hack:

這類Hack不僅對CSS生效,對寫在判斷語句里面的所有代碼都會生效

~兼容性測試基礎環境為:
windows系統;IE6-IE10, Firefox6.0, Chrome13.0, Safari5.1, Opera11.51

<head>
...
// 針對所有IE
<!--[if IE]>
    <style>
        .text{font-size:20px;}
    </style>
<![endif]-->

// 針對IE7版本
<!--[if IE 7]>
    <style>
        .text{color:red;}
    </style>
<![endif]-->

// 除了IE7版本
<!--[if ! IE 7]>
    <style>
        .text{color:red;}
    </style>
<![endif]-->

// 針對IE7及以上版本,不包含IE7
<!--[if gt IE 7]>
    <style>
        .text{color:red;}
    </style>
<![endif]-->

// 針對IE7及以上版本,包含IE7
<!--[if gte IE 7]>
    <style>
        .text{color:red;}
    </style>
<![endif]-->

// 針對IE7及以下版本,不包含IE7
<!--[if lt IE 7]>
    <style>
        .text{color:red;}
    </style>
<![endif]-->

// 針對IE7及以下版本,包含IE7
<!--[if lte IE 7]>
    <style>
        .text{color:red;}
    </style>
<![endif]-->
</head>

<body>
    <span class="text">顯示</span>
</body>
// 2、屬性Hack
.a{
    color:#090\9;    /* IE8+可識別 */
    *color:#f00;     /* IE7以下可識別 */
    _color:#ff0;     /* IE6以下可識別 */
}
// 3、選擇符Hack
* + html .a{color:#090;}  /* IE7可識別 */
* html .a{color:#ff0;}    /* IE6以下可識別 */

詳細介紹

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容