什么是CSS Hack？
2017-08-29 本文已影响11人
竹小星
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以下可识别 */
