首页 > 代码库 > CSS hack
CSS hack
虽然CSS hack技术有风险，不推荐使用，但还是有必要了解一下。
一、什么是CSS hack？
我的理解就是针对不同浏览器/不同版本，写相应CSS代码，这一过程叫做CSS hack。
二、CSS hack原理
由于不同浏览器/不同版本，对CSS的理解会有差异，以及CSS优先级的关系，我们可以据此针对不同的浏览器/版本写不同的CSS。
三、CSS hack分类
CSS hack主要可分为：选择器hack，CSS属性hack和IE条件hack。
1、选择器hack
选择器hack就是在选择器前加上一些只有特定浏览器才能识别的前缀进行hack。
比较常用的有以下几种：
- *html *前缀只对IE6生效
- *+html *+前缀只对IE7生效
- @media screen\9{...}只对IE6/IE7生效
- @media \0screen {body { background: red; }}只对IE8有效
- @media \0screen\,screen\9{body { background: red; }}只对IE6/7/8有效
- @media screen\0 {body { background: red; }} 只对IE8/9/10有效
- @media screen and (min-width:0\0) {body { background: gray; }} 只对IE9/10有效
- @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只对IE10有效
- :root body{background:red\9;}只对IE9有效
2、CSS属性hack
CSS属性hack就是在CSS属性名前加上一此只有特定浏览器才能识别的前缀进行hack。
下面是IE浏览器CSS hack对照表：
| hack | 写法 | IE6(S) | IE6(Q) | IE7(S) | IE7(Q) | IE8(S) | IE8(Q) | IE9(S) | IE9(Q) | IE10(S) | IE10(Q) |
| * | *color | Y | Y | Y | Y | N | N | N | N | N | N |
| + | +color | Y | Y | Y | Y | N | Y | N | Y | N | Y |
| - | -color | Y | Y | N | N | N | N | N | N | N | N |
| _ | _color | Y | Y | N | Y | N | Y | N | Y | N | N |
| # | #color | Y | Y | Y | Y | N | Y | N | Y | N | Y |
| \0 | color:red\0 | N | N | N | N | Y | N | Y | N | Y | N |
| \9\0 | color:red\9\0 | N | N | N | N | N | N | Y | N | Y | N |
| important | color:red !important | N | N | Y | N | Y | N | Y | N | Y | Y |
在标准模式中：
"-"减号是IE6特有的
“\9”是IE6~IE10都有效
"\0"是IE8~IE10的hack（最新opera也识别）
"\9\0"是IE9/E10的hack
由于浏览器对一些CSS hack存在交叉认识，所以需要通过覆盖的方式来实现对不同浏览器的hack。如下例子：
#test {
color:blue; /*firefox*/ color:red\9; /*all ie*/ color:yellow\0; /*ie8*/ *color:pink; /*ie7*/ _color:orange; /*ie6*/ } :root #test { color:purple\9; } /*ie9*/ @media all and (min-width:0px){ #test {color:black\0;} } /*opera 如果不加\0,firefox，chrome，safari也都认识*/ @media screen and (-webkit-min-device-pixel-ratio:0){ #test {color:gray;} } /*chrome and safari*/
3、IE条件hack
这种方式是IE浏览器专有的hack，也是微软官方推荐的hack方式:lt小于，gt大于，lte小于等于，gte大于等于，!非。
针对所有IE:<!--[if IE]>针对所有IE<![endif] -->
只针对IE6:<!--[if IE 6]>只针对IE6<![endif]-->
针对IE7及以下版本：<!--[if lte IE 7>针对IE7及以下版本<![endif]-->
针对IE8以上版本：<!--[if gt IE 8>针对IE8以上版本<![endif]-->
针对非IE:<!--[if !IE]>针对非IE<![endif] -->
CSS hack