CSS hack原理与常见的hack

hack原理：

原理：利用不同浏览器对CSS的支持和解析结果不一样编写针对特定浏览器样式。常见的hack有1）属性 hack。2）选择器hack。3）IE条件注释

IE条件注释：适用于[IE5, IE9]常见格式如下

常见的hack

<!--[if IE  6]> Special instructions    for IE  6   here <![endif]-->

选择器hack：不同浏览器对选择器的支持不一样

/*****  Selector    Hacks   ******//*  IE6 and below   */ * html #uno {   color:  red }/*  IE7 */ *:first-child+html  #dos {  color:  red }/*  IE7, FF,    Saf, Opera */ html>body #tres { color: red }/*  IE8, FF, Saf, Opera (Everything but IE  6,7) */ html>/**/body #cuatro { color:  red }/*  Opera 9.27 and below, safari 2 */ html:first-child #cinco { color: red }/*  Safari  2-3 */ html[xmlns*=""] body:last-child #seis   {   color:  red }/* safari 3+, chrome 1+, opera9+, ff 3.5+ */ body:nth-of-type(1) #siete  {   color:  red }/* safari 3+, chrome 1+, opera9+, ff 3.5+ */ body:first-of-type #ocho { color:  red }/* saf3+, chrome1+ */ @media screen   and (-webkit-min-device-pixel-ratio:0) {    #diez { color:  red } }/* iPhone / mobile webkit */ @media screen and (max-device-width: 480px) { #veintiseis { color: red }  }/*  Safari  2   -   3.1 */ html[xmlns*=""]:root #trece { color: red }/* Safari 2 - 3.1, Opera 9.25 */ *|html[xmlns*=""]  #catorce { color: red }/* Everything but IE6-8 */ :root *> #quince { color: red }/*  IE7 */ *+html #dieciocho { color: red }/* Firefox only. 1+ */ #veinticuatro, x:-moz-any-link { color: red }/*  Firefox 3.0+ */ #veinticinco, x:-moz-any-link, x:default { color: red }

属性hack：不同浏览器解析bug或方法

/* IE6 */ #once { _color: blue }/*  IE6, IE7 */ #doce { *color: blue; /* or #color: blue */ }/* Everything but IE6 */ #diecisiete { color/**/: blue }/*  IE6, IE7, IE8 */ #diecinueve { color: blue\9; }/*  IE7, IE8 */ #veinte { color/*\**/: blue\9; }/*  IE6, IE7 -- acts as an  !important */ #veintesiete { color: blue !ie; }/*    string  after   !   can be  anything    */