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);
问问题
246672 次
11 回答
339
css3-mediaqueries-js可能是您正在寻找的：这个脚本模拟媒体查询。但是（来自脚本的站点）它“不适用于@imported 样式表（出于性能原因，您无论如何都不应该使用它）。也不会监听<link>and<style>元素的媒体属性”。
同样，您有更简单的Respond.js，它只启用min-width和max-width媒体查询。
于 2011-04-24T14:06:49.867 回答
78
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 插件更简单且更易于访问的解决方案。
于 2011-04-24T15:10:05.780 回答
50
我发现的最佳解决方案是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
于 2014-01-09T21:39:03.203 回答
14
IE8（及更低版本）和 3.5 之前的 Firefox 不支持媒体查询。Safari 3.2 部分支持它。
有一些变通方法使用 JavaScript 为这些浏览器添加媒体查询支持。试试这些：
于 2011-04-24T14:12:51.850 回答
11
取自 css3mediaqueries.js 项目页面。
注意：不适用于 @import'ed 样式表（出于性能原因，您无论如何都不应该使用它）。也不会监听<link>and<style>元素的 media 属性。
于 2012-02-08T18:52:25.103 回答
8
使用 css3-mediaqueries-js 的一种简单方法是在结束 body 标记之前包含以下内容：
<!-- 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]-->
于 2014-02-19T05:05:41.903 回答
6
编辑答案： IE 仅将屏幕和打印理解为导入媒体。与 import 语句一起提供的所有其他 CSS 会导致 IE8 忽略 import 语句。像 safari 或 mozilla 这样的 Geco 浏览器没有这个问题。
于 2011-04-24T08:32:26.137 回答
6
IE8 及以下版本根本不支持媒体查询。
基于 Javascript 的解决方法
要添加对 IE8 的支持，您可以使用几种 JS 解决方案之一。例如，可以添加响应以仅使用以下代码添加对 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<9 的样式表，您可以在其中调整特定于 IE<9 的样式。为此，您应该将以下 HTML 添加到您的代码中：
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" media="all" href="style-ielt9.css"/>
<![endif]-->
笔记 ：
从技术上讲，这是另一种选择：使用CSS hack来定位 IE<9。它与仅 IE<9 的样式表具有相同的影响，但您不需要单独的样式表。不过，我不推荐这个选项，因为它们会产生无效的 CSS 代码（这只是当今普遍不赞成使用 CSS hack 的几个原因之一）。
于 2015-07-10T16:23:36.810 回答
5
在 Internet Explorer 8 之前，不支持媒体查询。但根据您的情况，您可以尝试使用条件注释来仅针对 Internet Explorer 8 及更低版本。您只需要使用适当的 CSS 文件架构。
于 2013-05-07T14:21:20.313 回答
4
http://blog.keithclark.co.uk/wp-content/uploads/2012/11/ie-media-block-tests.php
我用过@media \0screen {}，它在 REAL IE8 中对我来说很好用。
于 2014-08-18T06:35:24.857 回答
3
IE 直到 IE9 才添加媒体查询支持。因此，使用 IE8，您就不走运了。
于 2011-04-24T14:01:11.087 回答