IE9-11 @media冲突

Question

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

我为IE9找到的唯一解决方案是创建条件语句并使用！important。 不幸的是，这在10和11中不起作用（谢谢Microsoft）。 任何帮助表示赞赏。 同时，我将继续进行研究。

请记住，我仅通过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及其针对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 。