美文网首页
什么是CSS Hack?

什么是CSS Hack?

作者: 竹小星 | 来源:发表于2017-08-29 19:43 被阅读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以下可识别 */
    

    详细介绍

    相关文章

      网友评论

          本文标题:什么是CSS Hack?

          本文链接:https://www.haomeiwen.com/subject/cdhadxtx.html