当今web领域浏览器数目繁多,而且对w3c标准支持的程度也不一样。因此浏览器兼容便成为页面重构者的必修课。网上也有大量css hack的相关知识。那么这些hack的原理到底是怎样的呢?下面将通过测试,进行全面的讲解。

一、IE系列浏览器css hack总结

IE不同版本的浏览器css hack兼容,常用的是根据其对特殊字符的识别差异进行区分,下图是各浏览器css解析时对字符识别的对比表。

从上图可以分析出以下几种情况:

  1. 大部分特殊字符IE浏览器支持,其他主流浏览器firefox,chrome,opera,safari不支持 (opera可识别除外)。
  2. \9      :所有IE浏览器都支持
  3. _和-  :仅IE6支持
  4. *        :IE6、E7支持
  5. \ 0   :IE8、IE9支持,opera部分支持
  6. \9\ 0  :IE8部分支持、IE9支持
  7. \ 0\9  :IE8、IE9支持

IE浏览器css hack如下:

element{
color:#666\9; //IE8 IE9
* color:#999;   //IE7
_color:#EBEBEB; //IE6
}

可以看出,利用字符识别无法区分IE8和IE9,那么该如何区分呢?
我们可以从伪类的识别来区分,见下图(查看更多):

:root伪类IE系列只有IE9支持,其他主流浏览器均支持,利用这一点来区分IE8和IE9。另外考虑到opera部分支持,完全支持:root,所以不使用。

完整的IE浏览器css hack如下:

element{
color:#666\9;      //IE8
* color:#999;        //IE7
_color:#EBEBEB;      //IE6
}
:root element{color:#666\9;}//IE9

二、其他主流浏览器css hack总结

其他浏览器css hack主要是利用各自私有属性的at-rules进行区分 查看At-rule

1、Firefox浏览器:mozilla私有属性

Firefox hack是根据at-rules:@-moz-document来区分,查看此属性

Firefox的css hack如下:

@-moz-document url-prefix(){ .element{color:#f1f1f1;}} //Firefox

2、Webkit和Opera:

webkit和opera主要是根据at-rule:@media 进行hack处理 查看@media

//Webkit和Opera

@media all and (min-width: 0px){ .element{color:#777;} }

//Webkit

@media screen and (-webkit-min-device-pixel-ratio:0)
{
.element{color:#444;}
}

或者

使用“[;property:value;];”,webkit和IE7-都能识别。中括号内外的3个分号必须保留,第一个分号前可以是任意规则或任意多个规则.如下:

.element{
[;color:#f00;]; //webkit
*color:#444; //IE7-
}
//Opera
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
.element{color:#336699;}
}

三、兼容各大主流浏览器(最新版本)css hack汇总如下:

    .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*/