IE9-11 @媒体冲突

Question

最近我在IE中遇到了一个背景图片和媒体查询的问题。在我看来，IE9和10与媒体查询的背景属性相冲突，没有出现任何图像。在IE11中，只有“移动”图像出现。我已经做了两天了，完全不知所措。

我为IE9找到的唯一解决方案是创建一个条件语句并使用！不幸的是，这在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中测试了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。