各个浏览器hack的总结

一、基本概念

     所谓的浏览器hack是指由于不同版本的浏览器，或相同浏览器的不同时期的版本对css代码的识别存在一定程度的差异。而有时为了提高用户体验，我们不得不把其中的hack考虑在内，争取让页面在各个浏览器上显示达到一致。所以，我们为了获得统一的页面效果，就需要针对不同的浏览器或不同版本写特定的CSS样式，我们把这个针对不同的浏览器/不同版本写相应的CSS code的过程，叫做CSS hack!。

二、css  hack分类

 

CSS Hack大致有3种表现形式，CSS属性前缀法、选择器前缀法以及IE条件注释法（即HTML头部引用if IE）Hack。

1、属性前缀法(即类内部Hack)：例如 IE6能识别下划线"_"和星号" * "，IE7能识别星号" * "，但不能识别下划。

2、选择器前缀法(即选择器Hack)：例如 IE6能识别*html .class{}，IE7能识别*+html .class{}或者*:first-child+html.class{}。

3、IE条件注释法(即HTML条件注释Hack)：针对所有IE(注：IE10+已经不再支持条件注释)： <!--[if IE]>IE浏览器显示的内容 

<![endif]-->，针对IE6及以下版本： <!--[if lt IE 6]>只在IE6-显示的内容 <![endif]-->。这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。

三、css hack 应用技巧

                         技巧一：

                              实例代码：

                                        .bb{
                                                 height:32px;
                                                 background-color:#f1ee18;/*所有识别*/
                                                .background-color:#00deff\9; /*IE6、7、8识别*/
                                                +background-color:#a200ff;/*IE6、7识别*/
                                              _background-color:#1e0bd1;/*IE6识别*/
                                                }

                                             /*一个用于展示的class为bb的div标签*/

                                              < div class ="bb"></ div >

实例说明：

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

                                 技巧二：

                                  实例代码：

                                  .bb{
                                       height:32px;
                                       background-color:#f1ee18;/*所有识别*/
                                       background-color:#00deff\9; /*IE6、7、8识别*/
                                       +background-color:#a200ff;/*IE6、7识别*/
                                      _background-color:#1e0bd1;/*IE6识别*/
                                       }
                                   .bb, x:-moz-any-link, x:default{background-color:#00ff00;}/*IE7 firefox3.5及以下识别*/ 
                                   @-moz-documenturl-prefix(){.bb{background-color:#00ff00;}}/* 仅firefox 识别 */ 
                                   * +html.bb{background-color:#a200ff;}/*仅IE7 识别 */

                                   /*一个用于展示的class为bb的div标签*/

                                  < div class ="bb"></ div >

                                上段代码可用于把火狐从其它游览器中再次识别出来

                               技巧三：

                                实例代码：

                                   .bb{
                                        height:32px;
                                        background-color:#f1ee18;/*所有识别*/
                                        background-color:#00deff\9; /*IE6、7、8识别*/
                                        +background-color:#a200ff;/*IE6、7识别*/
                                        _background-color:#1e0bd1;/*IE6识别*/
                                      }
                                     @media screen and(-webkit-min-device-pixel-ratio:0){.bb{background-color:#f1ee18}} /*safari(Chrome) 有效*/
                                    .bb, x:-moz-any-link, x:default{background-color:#00ff00;}/*IE7 firefox3.5及以下识别*/ 
                                    @-moz-document url-prefix(){.bb{background-color:#00ff00;}}/*仅firefox 识别*/ 
                                     * +html .bb{background-color:#a200ff;}/* 仅IE7 识别 */

                                      /*一个用于展示的class为bb的div标签*/

                                   < div class ="bb"></ div >

实例说明：用于 识别Safari(Chrome)游览器。这是基于它们的内核webkit来识别的，用法为@media screen and (-webkit-min-device-pixel-ratio:0){.bb{background-color:#f1ee18}}

注意点：

    ie6下，同一个大括号里对同一个样式属性定义，其中一个加important则important标记是被忽略的，例：{background:red!important;background:green;} ie6下解释为背景色green，其它浏览器解释为背景色red；如果这同一个样式在不同大括号里定义，其中一个加important则important发挥正常作用，例：div{background:red!important}div{background:green}，这时所有浏览器统一解释为背景色red。

 

四、CSS hack利弊

          一般情况下，我们尽量避免使用CSS hack，但是有些情况为了顾及用户体验实现向下兼容，不得已才使用hack。比如由于IE8及以下版本不支持CSS3,而我们的项目页面使用了大量CSS3新属性在IE9/Firefox/Chrome下正常渲染，这种情况下如果不使用css3pie或htc或条件注释等方法时,可能就得让IE8-的专属hack出马了。使用hack虽然对页面表现的一致性有好处，但过多的滥用会造成html文档混乱不堪，增加管理和维护的负担。相信只要大家一起努力，少用、慎用hack，未来一定会促使浏览器厂商的标准越来越趋于统一，顺利过渡到标准浏览器的主流时代。抛弃那些陈旧的IE hack，必将减轻我们编码的复杂度，少做无用功。