什么是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以下可识别 */

详细介绍

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容