javascript 响应式网站在 IE 中不起作用（尽管 css3-mediaqueries.js）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15125905/
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
Responsive Site Not Working In IE (Despite css3-mediaqueries.js)
提问by Joe B.
I'm creating a Responsive Website but cannot seem to get it to work in IE (I'm testing in IE8). Now, I know that Internet Explorer 8 and below doesn't support CSS3 media queries. But I included the css3-mediaqueries.js Javascript file (hosted by Google) and it still doesn't work.
我正在创建一个响应式网站，但似乎无法让它在 IE 中工作（我正在 IE8 中进行测试）。现在，我知道 Internet Explorer 8 及以下版本不支持 CSS3 媒体查询。但是我包含了 css3-mediaqueries.js Javascript 文件（由 Google 托管），但它仍然不起作用。
I stripped out all the code leaving the very minimum (literally only 26 lines of HTML and a combined 34 lines of CSS). The HTML successfully validates as HTML5 and the CSS validates as CSS level 3. Here's the code:
我去掉了所有代码，只留下了最少的代码（实际上只有 26 行 HTML 和 34 行 CSS）。HTML 成功验证为 HTML5，CSS 验证为 CSS 级别 3。代码如下：
HTML
HTML
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0" />
<title>Responsive Site</title>
<link rel="stylesheet" type="text/css" href="css/custom.css" />
<link rel="stylesheet" type="text/css" media="only screen and (min-width:50px) and (max-width: 800px)" href="css/responsive.css" />
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- css3-mediaqueries.js for IE less than 9 -->
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
</head>
<body>
<div class="wrapper">
<div id="article"> </div>
<div id="side"> </div>
</div>
</body>
</html>
custom.css:
自定义.css：
@charset "UTF-8";
/*html5 display rule*/
article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {display: block;}
body {margin: 0px; padding:0px}
.wrapper {
width:78%;
margin:0 auto}
#article {
float:left;
width:61.224489795%;
margin:20px 0 0 0;
padding:0;
height:500px;
background-color:#000}
#side {
float:right;
width:30.775510204%;
margin:20px 0 0 0;
padding:0;
height:500px;
background-color:#999}
responsive.css:
响应.css：
@charset "UTF-8";
#article {
width:100%}
#side {
width:100%;
clear:left}
采纳答案by Joe B.
I finally figured it out! And only a few lines of code had to change.
我终于想通了！并且只需要更改几行代码。
A friend pointed out that the documentationfor the css3-mediaqueries.js Javascript file reads:
有朋友指出css3-mediaqueries.js Javascript文件的文档是这样写的：
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 and elements.
注意：不适用于 @import 的样式表（出于性能原因，无论如何都不应该使用它）。也不会监听 和 元素的媒体属性。
I was using the media attribute in the link element in my HTML file. So, here's what I did to resolve the issue:
我在 HTML 文件的 link 元素中使用了 media 属性。所以，这是我为解决问题所做的工作：
In the HTML file I removed:
在我删除的 HTML 文件中：
<link rel="stylesheet" type="text/css" media="only screen and (min-width:50px) and (max-width: 800px)" href="css/responsive.css" />
And replaced it with:
并将其替换为：
<link rel="stylesheet" type="text/css" href="css/responsive.css" />
I then added the media attribute to my responsive.css file:
然后我将 media 属性添加到我的responsive.css 文件中：
@charset "UTF-8";
@media screen and (max-width: 800px) {
#article {
width:100%}
#side {
width:100%;
clear:left}
}
But it still didn't work. I then changed the ordering of the media and @charset attributes in my responsive.css file. I simply rearranged lines 1 & 2:
但它仍然没有奏效。然后我在我的responsive.css 文件中更改了媒体和@charset 属性的顺序。我只是重新排列了第 1 行和第 2 行：
@media screen and (max-width: 800px) {
@charset "UTF-8";
That did the trick. Not sure exactly why the ordering of the character set makes a difference? Perhaps someone can shed some light on it.
这就是诀窍。不确定为什么字符集的顺序会有所不同？也许有人可以对此有所了解。
Thanks David for the useful suggestions! It's good to have several option in the tool shed and I may turn to respond.js in the future. But for now, I am happy with the code that Google is hosting.
感谢大卫的有用建议！工具栏里有几个选项很好，我将来可能会转向 response.js。但就目前而言，我对 Google 托管的代码感到满意。
回答by josh.chavanne
In addition to the inability to use @imported stylesheets (which is documented on the github and google code project) - there is a problem if one does not explicitly state the media query in a format similar to:
除了无法使用@imported 样式表（记录在 github 和 google 代码项目中）之外 - 如果没有以类似于以下格式的格式明确说明媒体查询，则会出现问题：
@media screen and (min-width: 666px) and (max-width: 1000px)
compared to:
相比：
@media and (min-width: 666px) and (max-width: 1000px)
please look at this issue in the github issues section for this project - after about an hour of trying to set this up - the lack of screenin my media-queries was causing them to not be recognized.
请在此项目的 github 问题部分查看此问题 - 经过大约一个小时的尝试设置后 -我的媒体查询中缺少屏幕导致它们无法被识别。
回答by David Taiaroa
Have you tried respond.js?
你试过response.js吗？
Good luck!
祝你好运！
Update
更新
It may be safer to combine your two CSS files into one. Add the mobile specs into your custom.css file with:
将两个 CSS 文件合二为一可能更安全。使用以下命令将移动规格添加到您的 custom.css 文件中：
@media (min-width: 50px) and (max-width: 800px) {
/* mobile CSS here */
} /* close @ media for mobile */
回答by evan toder
<meta http-equiv="X-UA-Compatible" content="IE=9">
You must place that before anyother meta tags.
您必须将其放在任何其他元标记之前。
