我正在创建一个响应式网站，但似乎无法让它在 IE 中运行(我正在 IE8 中进行测试)。现在，我知道 Internet Explorer 8 及以下版本不支持 CSS3 媒体查询。但是我包含了 css3-mediaqueries.js Javascript 文件(由 Google 托管)，但它仍然不起作用。
我删除了所有代码，只留下最少量的代码(实际上只有 26 行 HTML 和 34 行 CSS)。 HTML 成功验证为 HTML5，CSS 验证为 CSS 级别 3。代码如下:
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>
自定义.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}
最佳答案
除了无法使用@imported 样式表(记录在 github 和 google 代码元素中)之外 - 如果不以类似于以下格式的格式明确声明媒体查询，则会出现问题:
@media screen and (min-width: 666px) and (max-width: 1000px)
相比于:
@media and (min-width: 666px) and (max-width: 1000px)
请在这个元素的 github 问题部分查看这个问题 - 在尝试设置它大约一个小时后 - 我的媒体查询中缺少 screen 导致它们无法显示认可。
关于javascript - 响应站点在 IE 中不工作(尽管 css3-mediaqueries.js)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15125905/