CSS Hack

本篇文章就是为了我去前端笔试面试而写的，参考 CSS hacks 和 Browserhacks。

语法

1 2	<!--[if condition]> HTML <![endif]--> <!--[if !condition]> HTML <![endif]-->

等于

1
2
3

<!--[if IE8]>
<script src="lib/html5shiv.js">
<![endif]-->

小于

1
2
3

<!--[if lt IE8]>
<script src="lib/html5shiv.js">
<![endif]-->

小于或等于

1
2
3

<!--[if lte IE8]>
<script src="lib/html5shiv.js">
<![endif]-->

大于或等于

1
2
3

<!--[if gte IE8]>
<script src="lib/html5shiv.js">
<![endif]-->

大于

1
2
3

<!--[if gt IE8]>
<script src="lib/html5shiv.js">
<![endif]-->

不大于

1
2
3

<!--[if !gt IE8]>
<script src="lib/html5shiv.js">
<![endif]-->

不是

1
2
3

<!--[if !IE]>
<script src="lib/html5shiv.js">
<![endif]-->

IE6 和以下 IE 版本

* html {}

IE7 和以下 IE 版本（包括 IE6）

1	:first-child+html {} html{}

IE7 only

1	*:first-child+html {}

IE7 和现代浏览器 only

1	html>body {}

只用于现代浏览器(IE8 and above)

1	html>/**/body {}

用法(以 IE7 only 为例)

1	*:first-child+html #foo .bar {}

由于 IE6 及以下版本 IE 不支持 !important，所以如以下 CSS IE6 及以下版本会使用后面的样式

p {
    background: green !important;   /* 主流浏览器识别标识符 */
    background: red;    /* IE6 和以下版本 IE 识别 */
}

IE7 及以下版本不支持 @import，CSS Hacks 的解决做法是给非 IE7 及以下版本添加一个 css @import "non-ie.css" all;，怎么看都太奇葩了。

只有 IE6 及以下版本 IE 支持这种 hack，并且这种 CSS 写法是非法的，当然如果想只用与 IE6 及以下版本 IE 就可以这样写。其实 IE6 及以下版本 IE 不会对 CSS 属性前缀为非字母的属性报错才有这种 hack。

IE7 修复了 CSS 属性为 - 和 _ 同样识别的问题，当其他非字母前缀应用还是可以，比如 *，所以这种 hack 可以用于 IE7 及其以下版本。

>body 按标准是错误的 CSS 写法，但 IE7 会将其视为合法选择器等同于 *>body，同样对于 *+p 之类 IE7 也会视为 *+p，不过其他浏览器则会无视这个错误的选择器，因此这种 hack 可以用于 IE7。

html* 按标准是错误的 CSS 写法，但 IE7 会将其视为合法等同于 html *，而 ** 则会视为 * *，这种 hack 可以用于 IE7 及以下版本。

!ie 按标准是错误的 CSS 写法，但 IE7 会将其视为合法，主要是它修复 !important 问题时又出现的问题，甚至你在 ! 加任何字母都是合法的，这种 hack 可以用于 IE7 及以下版本。

好吧这个在 IE7 也是合法的，真是个巨坑。

一开始看到我也是想“这什么鬼写法”，它确实是在 IE6~IE8 起作用的。

1 2	.selector { property: value\9; } .selector { property/\*/: value\9; }