部分CSS (Hack)

1.条件注释控制符

  !  [if ! IE]             "非"运算符  

  lt  [if lt IE 6]            小于

  lte   [if lte IE 6]            小于等于

  gt    [if gt IE 6]          大于

  gte  [if gte IE 6]           大于等于

  ( )    [if (lte IE 6)]         用于子表达式,配合布尔运算符

  &    [if(lte IE 9)&(gt IE 6)]     AND运算符

  |    [if (gt IE6)|(!IE)]    OR运算符

  如:<!--[if IE 6]>仅IE6可以识别<![endif]-->

    *   只能被IE浏览器识别

    IE 7 不但能识别 * 符号,还能识别   !important

    div{

      color : green;      //Firefox 中显示绿色

      color : red !important;  //IE7中显示红色

      *color : blue;      //IE6中显示蓝色   

    }

    IE能识别 *html 与 *+html,非IE浏览器不能识别

      div{ color : red; }      非IE显示红色

      *html div{ color : green; }   IE6  显示绿色  

      *+html div{ color : blue; }   IE7  显示蓝色 

    更多区分浏览器区分方法

      #ie6{ _display:block; }    IE6

      #ie7{ *+display:block; }    IE7

      #ie8{ display:block\0; }    IE8

      :root #ie9{ display:block\0; }    IE9 10

      

2.常用的属性前缀

  -webkit  webkit核型浏览器    Chrome     Safari 等

  -moz   火狐

  -ms    IE

  -o      Opera

如:旋转效果

  div{

    margin:30px;
    width:200px;
    height:100px;
    background-color:yellow;
    /* Rotate div */
    
-ms-transform:rotate(-3deg);     /* Internet Explorer */
    -moz-transform:rotate(-3deg);   /* Firefox */
    -webkit-transform:rotate(-3deg);   /* Safari 和 Chrome */
    -o-transform:rotate(-3deg);      /* Opera */

    transform:rotate(-3deg);      /* W3C无属性前缀,放于最后会覆盖前面带属性的前缀的定义 */
  }

3.IE6中浮动元素的双倍边距问题

  IE6中首个浮动到父元素边上的元素,如果有该方向的margin值,会以双倍显示。

  解决办法:为浮动元素添加属性     display:inline;

4.

  

 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。