Question

我正在创建一个响应式网站，但似乎无法让它在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">&nbsp;</div>
    <div id="side">&nbsp;</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}

Answer 1

除了无法使用@imported样式表（github和google代码项目中记录）之外 - 如果没有以类似于以下格式明确说明媒体查询，则会出现问题：

@media screen and (min-width: 666px) and (max-width: 1000px)

与之相比：

@media and (min-width: 666px) and (max-width: 1000px)

请在此项目的github问题部分查看此问题 - 在尝试设置此项目大约一个小时后 - 我的媒体查询中缺少屏幕导致它们不会认可。

Answer 2

我终于明白了！只有几行代码必须改变。

一位朋友指出css3-mediaqueries.js Javascript文件的documentation为：

注意：不适用于@ import'ed样式表（您不应该使用它）无论如何出于性能原因）。也不会听媒体和元素的属性。

我在HTML文件的link元素中使用了media属性。所以，这就是我为解决这个问题所做的工作：

在我删除的HTML文件中

<link rel="stylesheet" type="text/css" media="only screen and (min-width:50px) and (max-width: 800px)" href="css/responsive.css" />

并将其替换为：

<link rel="stylesheet" type="text/css" href="css/responsive.css" />

然后我将media属性添加到了responsive.css文件中：

@charset "UTF-8";
@media screen and (max-width: 800px) {
#article {
    width:100%}

#side {
    width:100%;
    clear:left}
}

但它仍然无效。然后我在responsive.css文件中更改了媒体和@charset属性的顺序。我简单地重新安排了1号线和1号线。 2：

@media screen and (max-width: 800px) {
@charset "UTF-8";

这就是诀窍。不确定为什么字符集的顺序有所不同？也许有人可以对此有所了解。

感谢大卫的有用建议！在工具棚中有几个选项是好的，我可能会在将来转向回复.js。但就目前而言，我对Google托管的代码感到满意。

Answer 3

你试过respond.js吗？

祝你好运！

<强>更新

将两个CSS文件合并为一个可能更安全。使用以下命令将移动规范添加到custom.css文件中：

@media (min-width: 50px) and (max-width: 800px) {  

  /* mobile CSS here */

} /* close @ media for mobile */

Answer 4

<meta http-equiv="X-UA-Compatible" content="IE=9">

您必须在任何其他元标记之前放置它。

响应式站点在IE中不起作用（尽管css3-mediaqueries.js）

4 个答案: