css什么是hack,CSS hack 合集

本来已经抛弃IE6|7|8了，可是最近发现要考虑IE兼容性的网站还是有不少的，所以这两天了解了一下CSS HACK，在这里简单地总结一下！

1、何为HACK？

简单的说，HACK就是只有特定浏览器才能识别这段hack代码。Hack也可以说是让前端最为头疼的问题，因为要写N多种兼容代码。当然，IE是最让人蛋疼的。

一般来说，CSS HACK有3种表现形式：

CSS属性前缀法：：比如 IE6能识别下划线"_"和星号" * "，IE7能识别星号" * "，但不能识别下划线"_"，IE6~IE10都认识"\9"，但firefox对前面三个都不能认识。

CSS选择器前缀法：比如 IE6能识别*html .class{}，IE7能识别*+html .class{}或者*:first-child+html .class{}。

IE条件注释法：针对所有IE， 。比如：针对IE6及以下版本： 。这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效(注：IE10+已经不再支持条件注释)。

下面将对这三种形式一一分析！

2、CSS 属性前缀法

这里提供一个测试实例(所有下面的代码都可以在这个实例里找到)：测试实例

(1)IE6(_) .test1 { _color: red; }复制代码

(2)IE7及其以下版本(*)

如下设置，IE7及其以下版本中都会生效：

.test2 { *color: yellow; }复制代码 如果是在选择器上设置，则只会在IE6中生效： *html .test { color: gold; }复制代码

(3)IE6/IE7/IE8(\9)

网上的资料说只有IE6/IE7/IE8中生效，可是经测试，在IE9/IE10中也同样生效(如果知道原因的，请告知)： .test3 { color: purple\9; }复制代码

(4)IE8/IE9/IE10/IE11(\0)

在IE8/IE9/IE10/IE11中生效： .test4 { color: green\0; }复制代码

(5)IE6(-)

在IE6中生效： .test5 { -color: pink; }复制代码

(6)IE6/IE7(+)

在IE6/IE7中生效： .test6 { +color: gold; }复制代码

(7)IE6/IE7(*+)

如果在类的属性上加，会在IE6/IE7都生效： .test7 { *+color: blue; }复制代码

如果在选择器上加，只会在IE7生效： *+html .test { color: black; }复制代码

(8)!important

除了IE6，其他浏览器中都生效： .test8 { color: #fff !important; }复制代码

(9)IE9/IE10(\9\0) .test9 { color: orange\9\0; }复制代码

一般写HACK的顺序：从最新版本到低版本，比如：新版本、IE(10/9/8)、IE(7/6) color: black;  /* 所有 */

color: white !important; /* 除了IE6外 */

color: orange\9\0; /* IE 9/10 */

color: green\0;  /* IE 8/9/10 */

*color: yellow;   /* IE6/7 */

+color: gold;  /* IE6/7 */

*+color: blue; /* IE6/7 */

_color: red;  /* IE6 */复制代码

3、CSS选择器前缀法

(1)*

只在IE6中生效： *html .test21 { color: gold; }复制代码

(2)*+

只在IE7中生效： *+html .test22 { color: blue; }复制代码

(3)IE6/IE7

在IE6/IE7中生效： @media screen\9 {

.test23 { color: purple; }

}复制代码(4)IE6/IE7/IE8

在IE6/IE7/IE8中生效： @media \0screen\,screen\9 {

.test24 { color: gold; }

}复制代码 (5)IE8

在IE8中生效： @media \0screen {

.test25 { color: orange; }

}复制代码(6)IE8/IE9/IE10/IE11

在IE8/IE9/IE10/IE11中生效： @media screen\0 {

.test26 { color: green; }

}复制代码 (7)IE9/IE10/IE11

在IE9/IE10/IE11中生效： @media screen and (min-width: 0\0) {

.test27 { color: red; }

}复制代码

4、条件注释

下面的N表示版本。

(1)IE 复制代码

(2)IE N

比如：只在IE 7中生效： 复制代码

注意：版本之间要留空格，比如：IE7是无效的，应该是IE

7。

(3)gt

gt符号表示大于运算符。比如：在IE7以上(不包含IE7)生效 复制代码

(4)!

!符号表示非运算符。比如：在IE 6上不生效 复制代码

也可以这样(所有IE都不生效)： 复制代码

(5)lt

lt符号表示小于运算符。比如：IE6以下(不包含IE6)版本 复制代码

(6)lte

lte符号表示小于或等于运算符： 复制代码

(7) gte

gte符号表示大于或等于运算符： 复制代码

(8)&

&符号表示AND运算符： 复制代码

(9) |

|符号表示OR运算符： 复制代码

注：IE10+已经不再支持条件注释。

5、针对其他浏览器的HACK

(1)针对火狐

只在火狐中有效： @-moz-document url-prefix() {

.test { color: red; }

}复制代码

(2)支持所有Gecko内核的浏览器(包括火狐)

*>.test { color: blue; }复制代码

(3)针对Webkit内核浏览器

@media all and (min-width:0px) { color: purple; }复制代码

6、CSS选择器的优先级

相同权值情况下，CSS样式的优先级是：就近原则(也就是相同权值的，后设置的优先)：.a { color: red; }

.b { color: blue; }

我会是蓝色的，而不是红色

复制代码

优先级规则：

内联样式 > 嵌入样式 > 外部样式

ID(100) > 类选择符(10) > 标签(1) > 通配选择器(*)

在支持!important的情况下，其优先级最高。

参考文章：

如果发现有错误，欢迎在下方评论区指正！