hack

part2 —— CSS hack技巧大全

  • ——作者:吴雷君
  • 兼容范围:
  • IE:6.0+,FireFox:2.0+,Opera 10.0+,Sarari 3.0+,Chrome
    • 参考资料:
    • 各游览器常用兼容标记一览表:

    • 标记IE6IE7IE8FFOperaSarari
      [*+><] X X X X
      _ X X X X X
      9 X X X
      X X X X
      @media screen and (-webkit-min-device-pixel-ratio:0){.bb {}} X X X X X
      .bb , x:-moz-any-link, x:default X X √(ff3.5及以下) X X
      @-moz-document url-prefix(){.bb{}} X X X X X
      @media all and (min- 0px){.bb {}} X X X
      * +html .bb {} X X X X X
      游览器内核 Trident Trident Trident Gecko Presto WebKit
      (以上 .bb 可更换为其它样式名)
    • 注意点:

    • 网上很多资料中常常把!important也作为一个hack手段,其实这是一个误区。!important常常被我们用来更改样式,而不是兼容hack。造成这个误区的原因是IE6在某些情况下不主动识别!important,以至于常常被人误用做识别IE6的hack。可是,大家注意一下,IE6只是在某些情况下不识别(ie6下,同一个大括号里对同一个样式属性定义,其中一个加important 则important标记是被忽略的,例:{background:red!important; background:green;} ie6下解释为背景色green,其它浏览器解释为背景色red;如果这同一个样式在不同大括号里定义,其中一个加important 则important发挥正常作用,例:div{background:red!important} div{background:green},这时所有浏览器统一解释为背景色red。)


    • 实例讲解:
    • Hack应用情境(一)

    • 适用范围:IE:6.0,IE7.0,IE8.0之间的兼容

    • 实例说明:

    • 此例中我们使用了渐进识别的方式,从总体中逐渐排除局部。首先,巧妙的使用“9”这一标记,将IE游览器从所有情况中分离出来。接着,再次使用“+”将IE8和IE7、IE6分离开来,此时,我们的IE8已经独立识别。
    • 实例代码:

    • .bb{
      height:32px;
      background-color:#f1ee18;/*所有识别*/
      background-color:#00deff9; /*IE6、7、8识别*/
      +/*IE6、7识别*/
      _/*IE6识别*/
      }
    • /*一个用于展示的class为bb的div标签*/

      div class ="bb"></ div >

转载自:http://www.duitang.com/static/csshack.html

原文地址:https://www.cnblogs.com/fifis/p/4712834.html