1

我的页面开头如下

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Database Reports</title>
    <link href='http://fonts.googleapis.com/css?family=Oxygen:400,300' rel='stylesheet' type='text/css'>
    <link href='css/style.css' rel='stylesheet' type='text/css'>
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <!--[if (gte IE 6)&(lte IE 8)]>
        <script src="js/selectivizr-min.js"></script>
    <![endif]-->
</head>

然后在体内我有几个 DIV

<div class="left"></div>
...
<div class="left"></div>

我的CSS如下

.left {
    width: 30%;
    float: left;
    margin: 5px;
}

.left:nth-child(4) {
        clear: both;
}

@media screen and (max-width: 1024px) {
    .left {
        width: 40%;
    }

    .left:nth-child(4) {
        clear: none;
    }

    .left:nth-child(3) {
        clear: both;
    }
}

@media screen and (max-width: 800px) {
    .left {
        width: 80%;
    }

    .left:nth-child(4), .left:nth-child(3) {
        clear: none;
    }

    .left:nth-child(2) {
        clear: both;
    }
}

在 Firefox 和 Chrome 中，一切正常。在全分辨率下，有 3 列然后是中断，3 列然后是中断等

当浏览器调整大小（更小）时，有 2 列，中断 2 列，中断等。

我有 IE8，如果我关闭兼容模式，则有 3 列，然后是中断（如上所述），但是当我调整浏览器大小时，什么也没有发生。它始终保持在 3 列。

当我重新打开兼容模式（公司中的大多数用户都会有这个）或使用 IE7 时，没有发生中断或任何响应。

任何建议/帮助将不胜感激

4

1 回答 1

2

IE9 之前的 Internet Explorer 版本不支持媒体查询，因此媒体查询中的任何 CSS 在 IE7 或 IE8 中都不起作用。

如果您希望 IE6、IE7 和/或 IE8 了解媒体查询中的样式，Respond.js是一个可能的解决方案。

使用 polyfill 使旧的、仅限桌面的浏览器理解它们本机不支持的东西的利弊是有争议的，这就是为什么较早的评论建议使用单独的样式表来专门针对您想要支持的浏览器。为此，您将（显然）创建一个单独的样式表 - 可能类似于no-mq.css然后使用（条件注释）[http://www.quirksmode.org/css/condcom.html] 来定位 IE。

<!--[if (lt IE 9) & (!IEMobile)]>
  <link rel="stylesheet" href="no-mq.css" />
<![endif]-->

单独的样式表方法将允许您为旧版本的 IE 提供“固定宽度”体验，同时让功能强大的版本获得响应式体验。

此外，如果没有 polyfill 的某种帮助，您的使用:nth-child也将无法在 IE7 和 IE8 中工作（我认为这就是您包含Selectivizr的原因。请注意，在某些情况下，Selectivizr 可能会影响性能，因此请测试如果您使用 Selectivizr，则可以明智地提高您网站的性能。

于 2013-08-07T14:55:24.003 回答