IE8 不支持以下 CSS 媒体查询：
@import url("desktop.css") screen and (min-width: 768px);
如果不是，另一种写作方式是什么？ 在 Firefox 中也可以正常工作。
下面的代码有问题吗？
@import url("desktop.css") screen;
@import url("ipad.css") only screen and (device-width:768px);
【问题讨论】：
标签： html css responsive-design internet-explorer-8 media-queries
css3-mediaqueries-js 可能是您正在寻找的：此脚本模拟媒体查询。但是（来自脚本的站点）它“不适用于@imported 样式表（出于性能原因，您无论如何都不应该使用它）。也不会听<link> 和<style> 的媒体属性元素”。
同样，您有更简单的Respond.js，它只启用min-width 和max-width 媒体查询。
【讨论】：
IE9 之前的 Internet Explorer 版本不支持媒体查询。
如果您正在为 IE8 用户寻找一种降级设计的方法，您可能会发现 IE 的条件注释很有帮助。使用它，您可以指定一个 IE 8/7/6 特定的样式表，它会覆盖以前的规则。
例如：
<link rel="stylesheet" type="text/css" media="all" href="style.css"/>
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" media="all" href="style-ie.css"/>
<![endif]-->
这不允许在 IE8 中进行响应式设计，但可能是比使用 JS 插件更简单、更易于访问的解决方案。
【讨论】：
我找到的最佳解决方案是Respond.js，尤其是如果您主要关心的是确保您的响应式设计在 IE8 中有效。它在 min/gzip 压缩时非常轻巧，只有 1kb，您可以确保只有 IE8 客户端加载它：
<!--[if lt IE 9]>
<script src="respond.min.js"></script>
<![endif]-->
如果您使用引导程序，这也是推荐的方法：http://getbootstrap.com/getting-started/#support-ie8-ie9
【讨论】：
IE8（及更低版本）和 3.5 之前的 Firefox 不支持媒体查询。 Safari 3.2 部分支持它。
有一些变通方法使用 JavaScript 为这些浏览器添加媒体查询支持。试试这些：
Media Queries jQuery plugin (only deals with max/min width)
css3-mediaqueries-js – a library that aims to add media query support to non-supporting browsers
【讨论】：
取自 css3mediaqueries.js 项目页面。
注意： 不适用于 @import'ed 样式表（出于性能原因，无论如何都不应该使用它）。也不会监听<link> 和<style> 元素的媒体属性。
【讨论】：
使用 css3-mediaqueries-js 的一种简单方法是在结束正文标记之前包含以下内容：
<!-- css3-mediaqueries.js for IE less than 9 -->
<!--[if lt IE 9]>
<script
src="//css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js">
</script>
<![endif]-->
【讨论】：
已编辑答案：IE 仅将屏幕和打印理解为导入媒体。与 import 语句一起提供的所有其他 CSS 会导致 IE8 忽略 import 语句。像 safari 或 mozilla 这样的 Geco 浏览器没有这个问题。
【讨论】：
Media queries 在 IE8 及以下版本中根本不支持。
要添加对 IE8 的支持，您可以使用多种 JS 解决方案之一。例如，可以添加Respond 以添加仅对 IE8 的媒体查询支持，代码如下：
<!--[if lt IE 9]>
<script
src="respond.min.js">
</script>
<![endif]-->
CSS Mediaqueries 是另一个做同样事情的库。将该库添加到您的 HTML 的代码将是相同的：
<!--[if lt IE 9]>
<script
src="css3-mediaqueries.js">
</script>
<![endif]-->
如果您不喜欢基于 JS 的解决方案，您还应该考虑添加一个仅限 IE
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" media="all" href="style-ielt9.css"/>
<![endif]-->
注意：
从技术上讲，这是另一种选择：使用CSS hacks 定位 IE
【讨论】：
在 Internet Explorer 8 之前，不支持媒体查询。但根据您的情况，您可以尝试使用条件 cmets 仅针对 Internet Explorer 8 及更低版本。您只需要使用适当的 CSS 文件架构即可。
【讨论】：
http://blog.keithclark.co.uk/wp-content/uploads/2012/11/ie-media-block-tests.php
我使用了@media \0screen {}，它在 REAL IE8 中运行良好。
【讨论】：
IE 直到 IE9 才添加媒体查询支持。因此，使用 IE8 时你就不走运了。
【讨论】：