cssHack

cssHack

不同的浏览器，比如Internet Explorer 6，Internet Explorer 7，Mozilla Firefox等，对CSS的解析认识不一样，因此会导致生成的页面效果不一样，

得不到我们所需要的页面效果。这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。

这个针对不同的浏览器写不同的CSS code的过程，就叫CSS hack，也叫写CSS hack。

如：

CSS hack用来解决有些css属性在不同浏览器中显示的效果不一样的问题，如margin属性在ie6中显示的距离会比其他浏览器中显示的距离宽2倍

也就是说margin-left:20px;在ie6中距左侧对象的实际显示距离是40px，而在非ie6中显示的距左侧对象的距离是设置的值20px;

所以要想设置一个对象距离左侧对象的距离在所有浏览器中都显示是20px的宽度的样式应为：

.className{margin-left:20px;_margin-left:20px;}

1.\9：所有IE浏览器都支持；

2._和-：仅ie6支持；

3.*：IE6 IE7 支持；

4.\0: IE8 IE9 ,Opera部分支持；

5.\9\0: IE8部分支持,IE9支持；

6.\0\9: IE8,IE9支持；

实例一:区分IE和非IE浏览器

  #tip{
      width:100px;
      height:100px;
      background:blue;/*非ie浏览器显示为蓝色*/
      background:red\9;/*IE6 7 8 9 中显示为红色*/
  }

实例二：区分IE6，IE7,IE8，FF

  #tip1{
      background:blue;/*firefox背景为蓝色，所有浏览器都支持*/
      background:red\9;/*IE[6,9]可以覆盖上面的样式*/
      *background:black;/*IE[6,7]可以覆盖上面的样式*/
      _background:orange;/*仅仅IE6可以覆盖上面的样式*/
      /*
       总结：
       IE 系列的浏览器都可读取 \9
       IE6 IE7中可读取*
       IE6 中仅仅可以识别 _(-)
      */
  }

实例三：区分IE6 IE7 firefox（方法一）

  #tip2{
      background:blue;/*firefox 背景为蓝色*/
      *background:black;/*仅仅ie7中*/
      background:orange;/*仅仅ie6*/
  }

实例四：区分IE6 IE7 firefox（方法二）

  #tip3{
      background:blue;
      *background:green!important; /*ie7中的颜色*/
      *background:orange;/*仅仅ie6*/
  }

 实例五：区别IE6和firefox

  #tip4{
      background:black;/*火狐*/
      _background:red;/*ie6*/
  }

IE浏览器下的hack总结：

  #tip5{
      background:blue\9;/*ie8 9*/
      *background:blue;/*ie7*/
      _background:blue;/*ie6*/
  }

从上面看出无法区分ie 8 和 9；不过解决方法是有的；

:root div{
      /*:root这个伪类，只有ie9能够支持，
      但是部分其他浏览器可以使用
      所以不建议使用
      */
      background:pink;
  }

其他浏览器的hack

@-moz-document url-prefix（）{.element{color:red}};(firefox)

webkit和opera

  /*当媒体查询时*/
  @media all and (min-width:960px){
    .ele{}
  }
  /*webkit中的写法
  -webkit-min-device-pixel
  指的是：设备像素密度测试
  */
  @media screen and (-webkit-min-device-pixel-raio:2/3 ){
    .ele{}
  }
  /*opera中的写法*/
  @media all and (-webkit-min-device-pixel-ratio:2/3),not all and (-webkit-device-pixel-ratio:2/3)
  {
     .ele{}
  }

接着大总结

.element{
color:#000;             /*w3c标准*/
[;color:#f00;];         /*Webkit(chrome和safari)*/
color:#666\9;           /*IE8*/
*color:#999;            /*IE7*/
_color:#333;            /*IE6*/
}
:root .element{color:#0f0\9;}  /*IE9*/
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (
-webkit-min-device-pixel-ratio:0) { .element{color:#336699;}}  /*opera*/
@-moz-document url-prefix(){ .element{color:#f1f1f1;}} /*Firefox*/

这里顺便在提一下其他的hack技巧；