CSS Hack

CSS Hack 是实现浏览器样式兼容的兜底办法，能不用就尽量不要使用。但是，针对一些浏览器的 bug，比如老版本 IE 的 bug，有时使用 CSS Hack 是不得已而为之的做法。CSS Hack 主要分为属性标记法和选择器前缀法两种。

[1] 属性标记法

• IE6-  对于 IE6- 浏览器主要使用下划线 _ 和中划线 - 这两种字符

_color:blue; -color:blue;

1 2	_color:blue; -color:blue;

• IE7-  对于 IE7- 可以使用非常多的字符，包括 `~!@#$%^&*()=+{[]:<>,.?/  但，较常用的是加号 + 和星号 *

+color:blue; *color:blue;

1 2	+color:blue; *color:blue;

• IE10-  使用后缀 \9 可以识别出 IE10- 浏览器

color:blue\9;

1	color:blue\9;

• IE8+  使用后缀 \0 可以识别出 IE8+ 浏览器

color:blue\0;

1	color:blue\0;

• IE9、IE10  使用后缀 \9\0 可以识别出 IE9、10 浏览器

color:blue\9\0;

1	color:blue\9\0;

[2] 选择器前缀法

• IE6-  在选择器前面添加 * html，可以识别 IE6- 浏览器        // * 和 html 之间有无空格都可以生效

*html div{color:}

1	*html div{color:}

• IE7  在选择器前面添加 *+html，可以识别 IE7 浏览器        //  *、+、html 之间有无空格都可以生效

*+html div{color:}

1	*+html div{color:}

• IE8  在选择器外层使用 @media \0，可以识别 IE8 浏览器        // @media 和 \0 之间必须有空格

@media \0{ div{color:} }

1 2 3

@media \0{     div{color:} }

• IE9+ 及其他非 IE 浏览器  在选择器前面添加 :root，可以识别 IE9+ 及其他非 IE 浏览器

:root div{color:}

1	:root div{color:}