CSS HACK
由于不同的浏览器，甚至同一浏览器的不同版本对CSS的解析认识不一样，导致生成的页面效果不一致，写出针对不同浏览器CSS code就称为CSS hack。
至少从内核来说，就存在Mozilla，Webkit和IE好几种。通常来说，CSS hack主要用于IE系列。只要使用IE的用户比例还有，各种情况下的CSS就依旧得考虑。
css hack又分为3种，即属性hack，IE条件注释hack，CSS选择器Hack
属性HACK/内部HACK
属性HACK记是记不住的，这辈子都不可能记住。不过只要你用好搜索，勤快一点积极做测试，那么它就不是什么拦路虎。
CSS 内部hack 语法： selector{?property:value?;}
.myClass{
background-color:#f1ee18;/*所有识别*/
background-color:#00deff\9;/*IE6、7、8、9、10识别，但是IE11不支持，亲测*/
background-color:#00deff\0;/*IE8、9、10、11识别,据说还有opera*/
background-color:#00deff\9\0;/*IE8、9、10识别*/
+background-color:#a200ff;/*IE6、7识别*/
*background-color:#a200ff;/*IE6、7识别*/
_background-color:#1e0bd1;/*IE6识别*/
}
CSS3目前标准还没有统一，各个浏览器都有自己的表现方式，甚至有的实现，有的未实现，在前面加一些前缀以表示支持某个特定浏览器，这也是CSS 内部hack的基本原理，向上面这些简单易懂，但是真正的CSS hack 远远不止于此，因为有不死的IE6及其各种奇葩的兄弟版本。
/*Mozilla内核浏览器：firefox3.5+*/
-moz-transform: rotate | scale | skew | translate ;
/*Webkit内核浏览器：Safari and Chrome*/
-webkit-transform: rotate | scale | skew | translate ;
/*Opera*/
-o-transform: rotate | scale | skew | translate ;
/*IE9*/
-ms-transform: rotate | scale | skew | translate ;
/*W3C标准*/
transform: rotate | scale | skew | translate ;
去除Safari和苹果系统下的按钮等样式：
input[type=button], input[type=submit], input[type=file], button { cursor: pointer; -webkit-appearance: none; }
-webkit-tap-highlight-color：这个属性只用于iOS (iPhone和iPad)。当你点击一个链接或者通过Javascript定义的可点击元素的时候，它就会出现一个半透明的灰色背景。要重设这个表现，你可以设置-webkit-tap-highlight-color为任何颜色。
想要禁用这个高亮，设置颜色的alpha值为0即可。
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
条件注释HACK/HTML头部引用
类似于程序语句，只能使用在HTML文件里，而不能在CSS文件中使用，并且只有在IE浏览器下才能执行，这个代码在非IE浏览下非单不是执行该条件下的定义，而是当做注释视而不见。
lte：就是Less than or equal to的简写，也就是小于或等于的意思。
lt ：就是Less than的简写，也就是小于的意思。
gte：就是Greater than or equal to的简写，也就是大于或等于的意思。
gt ：就是Greater than的简写，也就是大于的意思。
! ：就是不等于的意思，跟javascript里的不等于判断符相同。
选择器HACK
选择器hack主要是针对IE浏览器，其实并不怎么常用，语法是这样的： selector{ sRules }
| IE6 | IE7 | IE8 | IE9 | IE10 | 现代浏览器 | |
| *html | GOOD | |||||
| *+html | GOOD | |||||
| :root | GOOD |
例如，针对IE9的hack可以这么写
:root .test
{
background-color:green;
}
书写顺序
因为CSS只要是同一级别，出现重复属性设置，后出现的会覆盖前面出现的，所以在书写的时候一般把识别能力强的写前面，看个例子:
background-color:green;
_background-color:red;
DIV在IE6上是红色，其它是绿色。
总结来说：先做一般配置，再做特殊配置，以在特殊情况下，能够覆盖掉一般配置。
各游览器常用兼容标记一览表
| 标记 | IE6 | IE7 | IE8 | FF | Opera | Sarari |
|---|---|---|---|---|---|---|
| [*+><] | √ | √ | X | X | X | X |
| _ | √ | X | X | X | X | X |
| \9 | √ | √ | √ | X | X | X |
| \0 | X | X | √ | X | √ | X |
| @media screen and (-webkit-min-device-pixel-ratio:0){.bb {}} | X | X | X | X | X | √ |
| .bb , x:-moz-any-link, x:default | X | √ | X | √(ff3.5及以下) | X | X |
| @-moz-document url-prefix(){.bb{}} | X | X | X | √ | X | X |
| @media all and (min-width: 0px){.bb {}} | X | X | X | √ | √ | √ |
| * +html .bb {} | X | √ | X | X | X | X |
| 游览器内核 | Trident | Trident | Trident | Gecko | Presto | WebKit |