CSS-Hack

不同的浏览器对CSS的解析结果是不同的，因此会导致相同的CSS输出的页面效果不同，这就需要CSS Hack来解决浏览器局部的兼容性问题。而这个针对不同的浏览器写不同的CSS 代码的过程，就叫CSS Hack。

CSS Hack分类

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的。

常用CSS hack

以 color:red 将字体设置为红色为例：

/* CSS属性级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识别 */

color:red!important; /* IE6 不识别!important 详情参见*/

-------------------------------------------------------------

/* CSS选择符级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　详情参见 */

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