IE8支持 CSS 媒体查询

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);
246871 次浏览
小开

编辑答案: IE 只理解屏幕和打印作为导入媒体。与 import 语句一起提供的所有其他 CSS 会导致 IE8忽略 import 语句。像 Safari 或 Mozilla 这样的 Geco 浏览器就没有这个问题。

小开

IE 直到 IE9才增加了媒体查询支持，所以在 IE8上你就不走运了。

小开

Css3-mediaqueries-js 可能就是您要找的: 这个脚本模拟媒体查询。但是(从脚本的站点)它“不能在 @imported 样式表上工作(出于性能原因，无论如何都不应该使用它)。也不会听取 <link>和 <style>元素的 media 属性”。

同样，还有更简单的 回答 JS，它只支持 min-width和 max-width媒体查询。

小开

IE8(和更低版本)和3.5之前的 Firefox 不支持媒体查询，Safari 3.2部分支持。

有一些解决方案可以使用 JavaScript 向这些浏览器添加媒体查询支持:

Media Query jQuery 插件(只处理最大/最小宽度)

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

小开
最佳答案

在 IE9 之前的 Internet Explorer 版本 不支持 media queries

如果你正在寻找一种方式针对 IE8 的用户来 降级，你可能会发现 IE 的 conditional commenting 有用。使用这个，您可以指定一个 IE8/7/6特定的样式表，该样式表覆盖写入以前的规则。

例如:

这不允许在 IE8中进行响应式设计，但可能是一个比使用 JS 插件更简单、更容易访问的解决方案。

小开

摘自 css3mediaqueries.js 项目页面。

注意: 无法在@import‘ ed 样式表上工作(出于性能原因，无论如何都不应该使用该样式表)。也不会监听 <link>和 <style>元素的 media 属性。

小开

在 Internet Explorer 8之前，不支持 Media 查询。但是，根据你的情况，你可以尝试使用条件注释，只针对 Internet Explorer 8或更低的目标。您只需要使用适当的 CSS 文件架构。

小开

我发现最好的解决方案是 回答 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，这也是推荐的方法

小开

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

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

我使用了 @media \0screen {}，它在 REALIE8中工作得很好。

小开

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 only 样式表，在该样式表中调整特定于 IE < 9的样式。为此，您应该在代码中添加以下 HTML:

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

注:

从技术上讲，这是另一种选择: 使用 < strong > CSS hacks 来瞄准 IE < 9。它与 IE < 9 only 样式表具有相同的影响，但是不需要单独的样式表。不过，我不推荐使用这个选项，因为它们会产生无效的 CSS 代码(这只是今天人们普遍不赞成使用 CSS 代码的几个原因之一)。


提交答案