IE8支持CSS Media Query

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可能就是你要找的东西:这个脚本模拟媒体查询.但是(从脚本的站点)它"不适用于@imported样式表(出于性能原因你不应该使用它.)也不会听取<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为这些浏览器添加媒体查询支持.试试这些:

媒体查询jQuery插件(仅处理最大/最小宽度)

css3-mediaqueries-js - 一个旨在为不支持的浏览器添加媒体查询支持的库

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及以下版本根本不支持媒体查询.

基于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 <9的样式表,你可以在其中调整特定于IE <9的样式.为此,您应该在代码中添加以下HTML:

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

注意 :

从技术上讲,这是另一种选择:使用CSS黑客攻击 IE <9.它与IE <9唯一样式表具有相同的影响,但您不需要单独的样式表.但是,我不推荐这个选项,因为它们会产生无效的CSS代码(这只是为什么今天使用CSS黑客的几个原因之一).

Answer 9

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