CSS Hack

作者: 蓝瘦额香菇 | 来源:发表于2016-11-16 00:40 被阅读23次

    这里说的Hack一般是针对于IE浏览器,使用Hack的最终目的也是为解决浏览器的兼容性问题。
    Hack一般分为三种:条件Hack,属性级Hack,选择符级Hack。

    1. 条件Hack

    如果不想在IE中看到某个区域,可以这样写:

    <!--[if IE]>
    <p>我只在IE9以下出现</p>
    <![endif]-->
    

    IE10以上不识别IE条件注释,如果我们想识别IE10,可以通过user-agent代理字符串。

    "Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 10.0; Win64; x64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729; SLCC2)"
    var m= /(MSIE\s)(\d+)/i.test(navigator.userAgent);
    var version = (m && m[2]) ? +m[2] : -1;
    

    大于或小于某个IE版本写法

    <!-- [if gt IE 6]>
    //大于IE6
    <![endif] -->
    
    <!-- [if gte IE 6]>
    //大于或等于IE6
    <![endif] -->
    
    <!-- [if lt IE 6]>
    //小于IE6
    <![endif] -->
    
    <!-- [if lte IE 6]>
    //小于或等于IE6
    <![endif] -->
    

    2. 属性Hack

    语法如下:

    .test {
      color: #fff; //FF
      [;color:#ddd;]; //Chrome,Safari
      color: #fef\0; //Opera
      color: #fef\9; //IE8+(IE11不识别)
      *color: #f00; //IE7
      _color: #ff0; //IE6
    }
    

    下面列举一些工作之中常用的Hack值

    • _:IE6及以下会识别。
    • *:IE7及以下会识别。
    • \9:IE6-IE10会识别(IE11不认识)。
    • \0:IE8及以上和opera会识别(IE11也识别)。
    • [;property:value;];:Webkit浏览器会识别,IE7以下也会识别。

    3. 选择符级Hack

    *html #demo { color: red;} //IE6
    *+html #demo { color: red;} //IE7
    

    以后还会收录更多的hack,后续会更新。

    相关文章

      网友评论

        本文标题:CSS Hack

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