使用 media query 进行 IE 的 CSS Hack

by Jack Pu

尽管现在很多大多数现代浏览器对 CSS3 的诸多特性已经开始支持了，但是有的时候我们还是避免不了对低版本的 IE 浏览器进行兼容性的样式写法。常见的思路无疑是写注释性语法:

<head>
<!--[if gt IE 9]><!-->
<style>
// your style rule
</style>
<!--<![endif]-->
</head>

关于IE 注释性语句可以看 这里

当然你也可以通过 JS 进行 UA 测判断，然后在 body 加上 ie的 class ，然后在样式里进行限制。

.ie .container{
	....
}

当然今天得重点是通过 media query 进行 CSS 的 hack。在 IE 中它们可以识别出这些特殊的符号 \0, \, 以及 \9，然后结合 media query 可以更好进行样式的区分。

非常常见的，比如我们要在对 css3 不支持的页面比如 IE8, IE6 , IE7 这些浏览器进行样式的区别。

@media \0screen\,screen\9 {
    body { background: green; }
}

比如针对 IE9, IE10的 Hack:

@media screen and (min-width:0\0) {
    body { background: yellow; }
}

针对 IE8, IE9以及 IE10 的 Hack:

@media screen\0 {
    body { background: orange; }
}

如果针对的浏览器只有 IE8 需要 hack:

@media \0screen {
    body { background: blue; }
}

演示地址 Codepen

你可以前往这个页面了解更多的支持情况。

r如果我们相对某些 CSS 语法支持的兼容性进行测试的话，我们可以使用 支持 support 语法的浏览器进行兼容性写法:

@supports ( display: flex ) { 
  .foo { display: flex; } 
}

上面是对 flex 布局的探测，如果支持，则读取里面的样式规则，你可以阅读 这篇文章了解更多~

扩展阅读