Html IE8 支持 CSS 媒体查询
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5769493/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
IE8 support for CSS Media Query
提问by testndtv
Does IE8 not support the following CSS media query:
IE8 是否不支持以下 CSS 媒体查询：
@import url("desktop.css") screen and (min-width: 768px);
If not, what is the alternate way of writing? The same works fine in Firefox.
如果不是，另一种写作方式是什么？在 Firefox 中同样可以正常工作。
Any issues with the code below?
下面的代码有问题吗？
@import url("desktop.css") screen;
@import url("ipad.css") only screen and (device-width:768px);
采纳答案by Aaron
Internet Explorer versions before IE9 do not support media queries.
IE9 之前的 Internet Explorer 版本不支持媒体查询。
If you are looking for a way of degradingthe design for IE8 users, you may find IE's conditional commenting helpful. Using this, you can specify an IE 8/7/6 specific style sheet which over writes the previous rules.
如果您正在为 IE8 用户寻找一种降低设计的方法，您可能会发现 IE 的条件注释很有帮助。使用它，您可以指定一个 IE 8/7/6 特定样式表来覆盖之前的规则。
For example:
例如：
<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]-->
This won't allow for a responsive design in IE8, but could be a simpler and more accessible solution than using a JS plugin.
这将不允许在 IE8 中进行响应式设计，但可能是比使用 JS 插件更简单、更易于访问的解决方案。
回答by Knu
css3-mediaqueries-jsis probably what you are looking for: this script emulates media queries. However (from the script's site) it "doesn't work on @imported stylesheets (which you shouldn't use anyway for performance reasons). Also won't listen to the media attribute of the <link>and <style>elements".
css3-mediaqueries-js可能就是你要找的：这个脚本模拟媒体查询。但是（来自脚本的站点）它“不适用于@imported 样式表（出于性能原因，无论如何您都不应该使用它）。也不会侦听<link>和<style>元素的媒体属性”。
In the same vein you have the simpler Respond.js, which enables only min-widthand max-widthmedia queries.
同样，你有更简单的Respond.js，它只启用min-width和max-width媒体查询。
回答by Brandon Pugh
The best solution I've found is Respond.jsespecially if your main concern is making sure your responsive design works in IE8. It's pretty lightweight at 1kb when min/gzipped and you can make sure only IE8 clients load it:
我发现的最佳解决方案是Respond.js，尤其是如果您主要关心的是确保您的响应式设计在 IE8 中有效。当 min/gzip 压缩时，它只有 1kb，非常轻巧，您可以确保只有 IE8 客户端加载它：
<!--[if lt IE 9]>
<script src="respond.min.js"></script>
<![endif]-->
It's also the recommended method if you're using bootstrap: http://getbootstrap.com/getting-started/#support-ie8-ie9
如果您使用引导程序，这也是推荐的方法：http: //getbootstrap.com/getting-started/#support-ie8-ie9
回答by Faraz Kelhini
IE8 (and lower versions) and Firefox prior to 3.5 do not support media query. Safari 3.2 partially supports it.
IE8（及更低版本）和 3.5 之前的 Firefox 不支持媒体查询。Safari 3.2 部分支持它。
There are some workarounds that use JavaScript to add media query support to these browsers. Try these:
有一些变通方法使用 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
回答by Bayo
Taken from the css3mediaqueries.js project page.
取自 css3mediaqueries.js 项目页面。
Note:Doesn't work on @import'ed stylesheets (which you shouldn't use anyway for performance reasons). Also won't listen to the media attribute of the <link>and <style>elements.
注意：不适用于 @import 的样式表（出于性能原因，您无论如何都不应该使用它）。也不会监听<link>and<style>元素的 media 属性。
回答by Ben C
An easy way to use the css3-mediaqueries-js is to include the following before the closing body tag:
使用 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]-->
回答by sra
Edited answer: IE understands just screen and print as import media. All other CSS supplied along with the import statement causes IE8 to ignore the import statement. Geco browser like safari or mozilla didn't have this problem.
编辑答案：IE 仅将屏幕和打印理解为导入媒体。与 import 语句一起提供的所有其他 CSS 会导致 IE8 忽略 import 语句。Geco 浏览器如 safari 或 mozilla 没有这个问题。
回答by John Slegers
Media queriesare not supported at all in IE8 and below.
IE8 及以下版本完全不支持媒体查询。
A Javascript based workaround
基于 Javascript 的解决方法
To add support for IE8, you could use one of several JS solutions. For example, Respondcan be added to add media query support for IE8 only with the following code :
要添加对 IE8 的支持，您可以使用多种 JS 解决方案之一。例如，可以添加Respond以添加对 IE8 的媒体查询支持，只需使用以下代码：
<!--[if lt IE 9]>
<script
src="respond.min.js">
</script>
<![endif]-->
CSS Mediaqueriesis another library that does the same thing. The code for adding that library to your HTML would be identical :
CSS Mediaqueries是另一个做同样事情的库。将该库添加到 HTML 的代码将是相同的：
<!--[if lt IE 9]>
<script
src="css3-mediaqueries.js">
</script>
<![endif]-->
The alternative
替代方案
If you don't like a JS based solution, you should also consider adding an IE<9 only stylesheet where you adjust your styling specific to IE<9. For that, you should add the following HTML to your code:
如果您不喜欢基于 JS 的解决方案，您还应该考虑添加一个仅限 IE<9 的样式表，您可以在其中调整特定于 IE<9 的样式。为此，您应该将以下 HTML 添加到您的代码中：
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" media="all" href="style-ielt9.css"/>
<![endif]-->
Note :
笔记 ：
Technically it's one more alternative: using CSS hacksto target IE<9. It has the same impact as an IE<9 only stylesheet, but you don't need a seperate stylesheet for that. I do not recommend this option, though, as they produce invalid CSS code (which is but one of several reasons why the use of CSS hacks is generally frowned upon today).
从技术上讲，这是另一种选择：使用CSS hacks来定位 IE<9。它与仅 IE<9 的样式表具有相同的影响，但您不需要单独的样式表。不过，我不推荐此选项，因为它们会产生无效的 CSS 代码（这只是当今人们普遍反对使用 CSS hack 的几个原因之一）。
回答by user1105491
Prior to Internet Explorer 8 there were no support for Media queries. But depending on your case you can try to use conditional comments to target only Internet Explorer 8 and lower. You just have to use a proper CSS files architecture.
在 Internet Explorer 8 之前，不支持媒体查询。但根据您的情况，您可以尝试使用条件注释来仅针对 Internet Explorer 8 及更低版本。您只需要使用适当的 CSS 文件架构。
回答by sgarbesi
http://blog.keithclark.co.uk/wp-content/uploads/2012/11/ie-media-block-tests.php
http://blog.keithclark.co.uk/wp-content/uploads/2012/11/ie-media-block-tests.php
I used @media \0screen {}and it works fine for me in REAL IE8.
我使用过@media \0screen {}，它在真正的 IE8 中对我来说很好用。
