CSS hack原理

什么是CSS hack

       不同的浏览器对W3C规范的支持有差别，因此相同的CSS在不同浏览器下被解析的结果不同，输出的页面效果也就不一致。这就需要CSS hack 来解决浏览器的兼容性问题。这个针对不同的浏览器写不同的CSS 代码的过程，就叫CSS Hack。

CSS Hack 形式

       CSS Hack大致有3种表现形式：CSS属性Hack、CSS选择符Hack以及IE条件注释Hack。Hack主要针对IE浏览器。

       1、属性级Hack：比如IE6能识别下划线"_"和星号" * "，IE7能识别星号" * "，但不能识别下划线"_"，而firefox两个都不能认识。

       2、选择符级Hack：比如IE6能识别*html  .class{}，IE7能识别*+html  .class{}或者*:first-child+html   .class{}。

       3、IE条件注释Hack：比如针对所有IE：<!--[if IE]><!--代码--><![endif]-->，针对IE6及以下版本：<!--[if lt IE 7]><!--代码--><![endif]-->，这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。

　　注意书写顺序：一般是将识别能力强的浏览器的CSS写在后面。通常先写FF等非IE浏览器所需样式，其次写IE8所需样式，接着是IE7的，再接着才是IE6的。

属性级hack

color:red;    /* 所有浏览器可识别*/
_color:red;     /*  仅IE6 识别 */
*color:red;    /*  IE6、IE7 识别 */
+color:red;    /*  IE6、IE7 识别 */
*+color:red;    /*  IE6、IE7 识别 */
[color:red;    /*  IE6、IE7 识别 */
color:red\9;    /* IE6、IE7、IE8、IE9 识别 */
color:red\0;    /* IE8、IE9 识别*/
color:red\9\0;    /* 仅IE9识别 */
color:red \0;    /* 仅IE9识别 */

选择符级hack

*html #demo { color:red;}   /*  仅IE6 识别 */
*+html #demo { color:red;}  /*  仅IE7 识别 */
body:nth-of-type(1) #demo { color:red;} /* IE9+、FF3.5+、Chrome、Safari、Opera 可以识别 */
head:first-child+body #demo { color:red; } /* IE7+、FF、Chrome、Safari、Opera 可以识别 */
:root #demo { color:red\9; } : /* 仅IE9识别 */

IE条件注释Hack

       IE条件注释是微软从IE5开始就提供的一种非标准逻辑语句，作用是可以灵活的为不同IE版本浏览器导入不同html元素，如：样式表，html标签等。很显然这种方法的最大好处就在于属于微软官方给出的兼容解决办法而且还能通过W3C的效验。

只有IE才能识别 

<!--[if IE]> <link type="text/css" rel="stylesheet" href="my.css" /><![endif]-->//因为只有IE5以上的版本才开始支持IE条件注释，所有“只有IE”才能识别的意思是“只有IE5版本以上”才能识别。

只有特定版本才能识别

<!--[if IE 8]> <link type="text/css" rel="stylesheet" href="my.css" />   <![endif]-->//识别特定的IE版本，高了或者低了都不可以。上例只有IE8才能识别。

只有不是特定版本的才能识别

//!：就是不等于的意思，跟javascript里的不等于判断符相同。<!--[if !IE 7]> <link type="text/css" rel="stylesheet" href="my.css" />   <![endif]-->//特定IE7版本不能识别，其他版本都能识别，当然要在IE5以上。

只有高于特定版本才能识别

//gt ：就是Greater than的简写，也就是大于的意思。<!--[if gt IE 7]> <link type="text/css" rel="stylesheet" href="my.css" />   <![endif]-->//只有高于IE7的版本才能识别。IE7无法识别。

等于或者高于特定版本才能识别

//gte：就是Greater than or equal to的简写，也就是大于或等于的意思。<!--[if gte IE 7]> <link type="text/css" rel="stylesheet" href="my.css" />   <![endif]-->//IE7和更高的版本都能识别。

只有低于特定版本的才能识别

//lt ：就是Less than的简写，也就是小于的意思。<!--[if lt IE 7]> <link type="text/css" rel="stylesheet" href="my.css" />   <![endif]-->//只有低于IE7的版本才能识别，IE7无法识别。

等于或者低于特定版本的才能识别

//lte ：就是Less than or equal to的简写，也就是小于或等于的意思。<!--[if lte IE 7]> <link type="text/css" rel="stylesheet" href="my.css" />   <![endif]-->//IE7和更低的版本可以识别。

注意：

       １、有人会试图使用<!--[if !IE]>来定义非IE浏览器下的状况，但注意：条件注释只有在IE浏览器下才能执行，这个代码在非IE浏览下被当做注释视而不见。
       ２、我们通常用IE条件注释根据浏览器不同载入不同css，从而解决样式兼容性问题的。其实它可以做的更多。它可以保护任何代码块——HTML代码块、JavaScript代码块、服务器端代码……看看下面的代码。

<!--[if IE]> <script type="text/javascript">  alert("你使用的是IE浏览器！"); </script> <![endif]-->

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