虽然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 screen9{...}只对IE6/IE7生效
- @media screen {body { background: red; }}只对IE8有效
- @media screen\,screen9{body { background: red; }}只对IE6/7/8有效
- @media screen {body { background: red; }} 只对IE8/9/10有效
- @media screen and (min-0 ) {body { background: gray; }} 只对IE9/10有效
- @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只对IE10有效
- :root body{background:red9;}只对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 |