Question

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);

Answer 1

css3-mediaqueries-js可能就是您要找的内容：此脚本模拟媒体查询。但是（来自脚本的网站）它“不适用于@import ed样式表（出于性能原因你不应该使用它们。）也不会听<link>的媒体属性和<style>元素“。

同样，您可以使用更简单的Respond.js，它只会启用min-width和max-width媒体查询。

Answer 2

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插件更简单，更易于访问的解决方案。

Answer 3

我发现的最佳解决方案是Respond.js，特别是如果您的主要关注点是确保您的响应式设计在IE8中有效。在min / gzip时，它的重量非常轻，1kb，你可以确保只有IE8客户端加载它：

<!--[if lt IE 9]>
<script src="respond.min.js"></script>
<![endif]-->

如果你使用bootstrap，这也是推荐的方法：http://getbootstrap.com/getting-started/#support-ie8-ie9

Answer 4

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

Answer 5

取自css3mediaqueries.js项目页面。

注意：不适用于@ import'ed样式表（出于性能原因，您不应该使用它们）。也不会收听<link>和<style>元素的媒体属性。

Answer 6

使用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]-->

Answer 7

编辑回答：IE只了解屏幕并打印为导入媒体。随import语句提供的所有其他CSS都会导致IE8忽略import语句。像safari或mozilla这样的Geco浏览器没有这个问题。

Answer 8

在IE8及以下版本中根本不支持

Media queries。

基于Javascript的解决方法

要添加对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＆lt; 9唯一的样式表，你可以在其中调整特定于IE＆lt; 9的样式。为此，您应该在代码中添加以下HTML：

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

注意：

从技术上讲，这是另一种选择：使用CSS hacks来定位IE＆lt; 9。它与IE＆lt; 9唯一样式表具有相同的影响，但您不需要单独的样式表。不过，我不推荐这个选项，因为它们会产生无效的CSS代码（这只是为什么今天使用CSS黑客的一个原因之一。）

Answer 9

在Internet Explorer 8之前，不支持媒体查询。但根据您的情况，您可以尝试使用条件注释仅针对Internet Explorer 8及更低版本。您只需使用正确的CSS文件架构。

Answer 10

http://blog.keithclark.co.uk/wp-content/uploads/2012/11/ie-media-block-tests.php

我使用了@media \0screen {}，它在REAL IE8中对我来说很好。

Answer 11

IE直到IE9才添加媒体查询支持。因此，使用IE8，你运气不好。

IE8支持CSS Media Query

11 个答案:

基于Javascript的解决方法

替代