Question

这是我第一次尝试开发响应式网站。它在IE9的所有浏览器中都运行良好。我知道IE9与媒体查询兼容。我检查了兼容模式是否已关闭，我没有看到图标可见，所以我相信它是。我的媒体查询列在基本样式下方。我将在下面粘贴几个媒体查询，这样我就不会超过任何字符限制。如果您需要了解更多信息，请与我们联系。注意：doc类型适用于html5。

媒体查询：

@media only screen and (max-width: 479px) {
  /* 320 =================================================== */

  header .logo a {
    background:url(../images/logo-320.png) no-repeat;
    width:213px;
    height:69px;
    float:left;
    margin-top:35px;
    display:block;
}

}

@media only screen and (max-width: 480px) {
    header {min-width:100%;}

    .main-link-wrap {
    width:100%;
    margin:0 auto;
}

    .featured-prod {
        width:100%; 
    }

    footer {
        min-width:100%;
}

}

@media only screen and (min-width: 480px) {
  /* 480 =================================================== */

    header .logo a {
    background:url(../images/logo-480.png) no-repeat;
    width:310px;
    height:94px;
    float:left;
    margin-top:5px;
    display:block;
}

.featured-prod .product-box {
    width:185px;    
    margin-left:1.8%;
    margin-right:1.8%;
    text-align:left;
    color:#282828;
    font-size:12px;
    font-size:1.2rem;
    line-height:13px;
    float:left;
}

footer .address {
    font-size:22px;
    line-height:32px;   
}

}

Answer 1

使用非常简单的html5页面进行测试。

<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="style.css" />
</head>
<body>
</body>
</html>

引用您的样式表。加入

body {background：＃F00;}

到第一个查询和

body {background：＃00F;}

到第二个查询。

在IE9中调整大小时，背景从红色变为蓝色，表示媒体查询正在运行。我建议尝试将相同内容添加到您的页面以证明媒体查询。

如果背景按预期更改，那么您的CSS会出现其他问题（例如，它是否针对正确的元素;是另一种样式覆盖等等。）

如果背景没有改变，那么页面上会出现异常或兼容性等。

Answer 2

您是否有理由使用max-width: 479px和max-width: 480px媒体查询？我假设您在max-width: 479px区块中没有看到任何样式？这是因为您的max-width:480px规则正在覆盖这些规则。

这就是为什么，如果浏览器的宽度为320px - 这意味着它小于479px的最大宽度，但它也小于480px（两个条件都满足）。而且因为你的max-width: 480px覆盖了这些规则之后你已经max-width:479px阻止。我建议您将max-width: 480px中的规则包含在max-width: 479px块或反之中。

作为一个FYI，这个问题不是特定于IE9的 - 在这种意义上安排CSS规则在所有浏览器中的行为方式都相同。

IE9忽略了媒体查询

2 个答案: