响应网站不工作在IE（尽管css3-mediaqueries.js） [英] Responsive Site Not Working In IE (Despite css3-mediaqueries.js)
问题描述
我创建一个响应网站，但似乎无法让它工作在IE（我在测试在IE8）。现在，我知道Internet Explorer 8及以下版本不支持CSS3媒体查询。但我包括了css3-mediaqueries.js Javascript文件（由Google托管），它仍然无法正常工作。
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.
我删除了所有的代码，从字面上只有26行HTML和组合34行CSS）。 HTML成功验证为HTML5，CSS验证为CSS级别3.代码如下：
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:
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：
@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：
@charset "UTF-8";
#article {
width:100%}
#side {
width:100%;
clear:left}
推荐答案
出来！只有几行代码必须改变。
I finally figured it out! And only a few lines of code had to change.
一位朋友指出，文档 css3-mediaqueries.js的Javascript文件读取：
A friend pointed out that the documentation for the css3-mediaqueries.js Javascript file reads:
注意： t工作在@导入的样式表（你不应该使用
无论如何性能的原因）。也不会听媒体
属性和元素。
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.
我在链接中使用media属性元素在我的HTML文件。下面是我解决问题的方法：
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 rel="stylesheet" type="text/css" media="only screen and (min-width:50px) and (max-width: 800px)" href="css/responsive.css" />
并替换为： / p>
And replaced it with:
<link rel="stylesheet" type="text/css" href="css/responsive.css" />
css档案：
@charset "UTF-8";
@media screen and (max-width: 800px) {
#article {
width:100%}
#side {
width:100%;
clear:left}
}
但它还是无法工作。然后我改变了我的responsive.css文件中的媒体和@charset属性的顺序。我只是重新排列1& 2：
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:
@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.
感谢大卫的有用建议！在工具箱中有几个选项是好的，我可能会转向respond.js在未来。但是，现在，我对Google托管的代码感到满意。
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.
这篇关于响应网站不工作在IE（尽管css3-mediaqueries.js）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
