Question

我想知道IE8及以下版本如何对CSS中的媒体查询作出反应。

我不是在寻找IE8的解决方案来渲染它们。我只是想知道IE是否会忽略它们，或者IE是否会尝试解析它们。

背景故事：我们正在构建一个响应式网站，但由于IE8及以下版本很少在较小的屏幕设备上使用，我们希望IE只是忽略媒体查询。这样，IE8（及以下）用户总能看到网站的“常规大小”版本，这很好。

Answer 1

简而言之，你是完全正确的。

IE8不支持媒体查询，也不会解析其中包含的任何CSS。

因此，如果您想在响应式网站中支持IE8，则应确保您希望IE8使用的默认CSS不在任何媒体查询中。

所以简短的回答是你在问题中所说的几乎完全正确。

当然还有其他注意事项：IE8并不是唯一不了解媒体查询的浏览器;一些较旧的Android设备和其他旧手机也可能不支持它们。如果您需要支持这些设备，则可能需要考虑如何处理它。幸运的是，没有那么多人使用这些设备浏览网页，因此除非您有特殊需要，否则通常可以忽略它们。

您还可以选择使用像Respond.js这样的polyfill脚本，它可以为IE8等旧浏览器添加对媒体查询的支持。请注意，这是一个javascript库，所以它只会在页面加载后运行，因此可能会有一些延迟和屏幕重绘，这不是很好，但它被很多网站使用并且效果很好，所以你可能想要考虑它。

Answer 2

即8不支持媒体查询，但这些聚合填充使媒体查询支持8，即7。实际上它是一个很好的选择，使用其他你需要显示网站的“常规大小”版本？它可能通过一些黑客，即css链接文件的条件注释和你为旧浏览器编写css代码的方式，尝试覆盖具有高css特异性的样式。

注意：如果您使用的是html5，请添加由google托管的其他polyfill Html5shiv 。

使用html5和这样的媒体查询：

<!--[if lt IE 9><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">            </script>
<script src="js/respond.min.js"></script>
<![endif]-->

检查polyfills respondjs --- http://responsejs.com/和css3媒体查询 -

https://code.google.com/p/css3-mediaqueries-js/

为了使用“常规尺寸”版本。

<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="ie8.css" />
<![endif]-->

了解一些规格和提示，技巧登录http://www.pointmycode.com/

IE8及以下如何处理媒体查询

2 个答案: