css hack,解决浏览器样式展现差异的一种方案，使用需要慎之又慎
本文转帖自 http://www.cnblogs.com/sharpxiajun/p/3292498.html
CSS Hack技术是什么？
不同的浏览器对某些CSS代码解析会存在一定的差异，因此就会导致不同浏览器下给用户展示的页面效果不一样，碰到这样的情况就需要开发人员通过针对不同的浏览器对应写出不同的CSS代码，从而达到兼容不同浏览器的目的，不会让页面因为浏览器的不同而产生有差异的显示。
CSS Hack原理
通过不同浏览器自身所带有的特别标识符以及CSS中优先级的机制来实现不同浏览器里CSS样式兼容性的问题。
CSS Hack有三种实现方式
CSS类内部的Hack、CSS选择器的Hack和HTML头部的Hack。
1.CSS类内部的Hack：
是指CSS属性或属性值里加上只有某个浏览器自己可以识别的特殊字符串。
例如IE6和IE7都会识别在CSS里属性名称前加上“*”号的属性，但是firefox却无法识别带“*”号的属性，因此下面的代码：
body{ background:green; /* firefox下的显示 */ *background:red; /* IE6和IE7下的显示 */ }
2.CSS选择器的Hack：
它是指在CSS选择器前面加上只有某种浏览器自己可以识别的特殊字符串。
例如：IE6能识别*html .class{}，IE7能识别*+html .class{}。
3.HTML头部的Hack：这种方式主要是针对IE浏览器，它不仅有很多自己独有的区别于其他浏览器的CSS样式，自己不同版本之间的CSS实现也会存在很大的差异。
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS hack技术</title> </head> <style type="text/css"> div{ width:400px; height:120px; margin-bottom:20px; border-style:solid; border-width:1px; } div.d01{ background:red;/* FF */ background:blue\0;/* OP */ background:turquoise\9;/* IE8+ */ [background:red;background:black;/* SA,CH */ *background:green; /* IE7 */ _background:yellow;/* IE6 */ } </style> <body> <div class="d01"></div> </body> </html>
运行上面的页面，我们发现不同浏览器展现的背景颜色不一样，会按照我们在css注释中描述的展现，但这里面还有个顺序的问题，谁前谁后会有不同的效果。
1.引起这个问题的原因是CSS优先级的问题，
例如background:turquoise\9;这种写法不会导致高版本的ie在显示上产生偏差，是因为高版本的ie会优先使用这个样式。
2.对于同级别的CSS样式，最后面的样式会覆盖前面的样式。
例如我们在ie6和ie7下看到的情况，
3.如果正确的样式前面的样式写法导致浏览器无法正常解析，那么就会导致整个CSS样式加载的失败，
例如firefox。
