CSS Hack

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


[1] 属性标记法

  • IE6-  对于 IE6- 浏览器主要使用下划线 _ 和中划线 - 这两种字符
_color:blue;
-color:blue;
  • IE7-  对于 IE7- 可以使用非常多的字符,包括 `~!@#$%^&*()=+{[]:<>,.?/  但,较常用的是加号 + 和星号 *
+color:blue;
*color:blue;
  • IE10-  使用后缀 \9 可以识别出 IE10- 浏览器
color:blue\9;
  • IE8+  使用后缀 \0 可以识别出 IE8+ 浏览器
color:blue\0;
  • IE9、IE10  使用后缀 \9\0 可以识别出 IE9、10 浏览器
color:blue\9\0;

[2] 选择器前缀法

  • IE6-  在选择器前面添加 * html,可以识别 IE6- 浏览器        // * 和 html 之间有无空格都可以生效
*html div{color:}
  • IE7  在选择器前面添加 *+html,可以识别 IE7 浏览器        //  *、+、html 之间有无空格都可以生效
*+html div{color:}
  • IE8  在选择器外层使用 @media \0,可以识别 IE8 浏览器        // @media 和 \0 之间必须有空格
@media \0{
    div{color:}
}
  • IE9+ 及其他非 IE 浏览器  在选择器前面添加 :root,可以识别 IE9+ 及其他非 IE 浏览器
:root div{color:}