Question

我最近在IE中遇到了背景图片和媒体查询的问题。对我来说似乎是IE9和10与媒体查询的背景属性冲突，导致没有图像出现。在IE11中，仅显示“移动”图像。我已经在这里待了大约2天而且完全被困住了。

我发现IE9的唯一解决方案是创建条件语句并使用！important。不幸的是，这在10和11中都不起作用（谢谢微软）。任何帮助表示赞赏。与此同时，我将继续做研究。

请记住，我只是通过netrenderer.com对此进行了测试，因此我不能100％确定结果是否准确。

HTML：

<div style="width: 100%; border: 1px solid #00F;">
    <div class="logo"></div>
</div>

CSS：

    .logo { width: 500px; height: 190px; background: url(desktop.png) no-repeat; }
    @media ( max-width: 400px ) {
        .logo { width: 100%; height: 140px; background: url(mobile.png) no-repeat; }
    }

Answer 1

我测试了IE11中的following code及其IE10和9的模式。它完美无瑕。

.logo { width: 500px; height: 190px; background: url(http://placehold.it/600x300) no-repeat; }
@media screen and ( max-width: 400px ) {
    .logo { width: 100%; height: 140px; background: url(http://placehold.it/350x150) no-repeat; }
}

您忘了在媒体查询中添加screen。

IE9-11 @media冲突

1 个答案: