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以下可識別 */