CSS Hack

在网上找了份关于CSShack的文章，挺好的，记下来，以后用：

 

<! DOCTYPE html >  
< html >  
< head >  
     < title >Css Hack </ title >  
     < style >   
    

#test   
  {    
       

 width : 300px

height : 300px ;         ;

background-color : blue ;        /* firefox */

background-color : red\9 ;        /* all ie */

background-color : yellow\0 ;      /* ie8 */

+background-color : pink ;          /* ie7 */

_background-color : orange ;         /* ie6,顺序很重要 */

  }   
    

:root #test  {  background-color : purple\9 ;   }    /* ie9 */
    

@media all and (min-width:0px) {  #test {background-color : black\0 ; }  }   /* opera */

@media screen and (-webkit-min-device-pixel-ratio:0) {  #test {background-color : gray ; }  }   /* chrome and safari */
    

</ style >  
</ head >  
< body >  
     < div  id ="test" >test </ div >  
</ body >  
</ html > 

测试文件：

      分析如下：

    background-color:blue; 各个浏览器都认识，这里给firefox用；

    background-color:red\9;\9所有的ie浏览器可识别；

    background-color:yellow\0; \0 是留给ie8的，但笔者测试，发现最新版opera也认识，汗。。。不过且慢，后面自有hack写了给opera认的，所以，\0我们就认为是给ie8留的；

    +background-color:pink; + ie7定了；

    _background-color:orange; _专门留给神奇的ie6；

    :root #test { background-color:purple\9; } :root是给ie9的，网上流传了个版本是  :root #test { background-color:purple\0;}，呃。。。这个。。。，新版opera也认识，所以经笔者反复验证最终ie9特有的为:root 选择符 {属性\9;}

    @media all and (min-width:0px){ #test {background-color:black\0;} } 这个是老是跟ie抢着认\0的神奇的opera，必须加个\0,不然firefox，chrome，safari也都认识。。。

    @media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} }最后这个是浏览器新贵chrome和safari的。

    好了就这么多了，特别注意以上顺序是不可以改变的。css hack虽然可以解决个浏览器之间css显示的差异问题，但是毕竟不符合W3C规范，我们平时写css最好是按照标准来，这样对我们以后维护也是大有好处的，实在不行再用。