媒体查询在Internet Explorer 11中无法工作

Question

我目前正在www.yewtreeweb.co.uk上用WordPress创建我的作品集网站。然而，我在Internet Explorer 11中遇到了媒体查询无法正常工作的问题。当我添加媒体查询时，在检查元素控制台中，Internet Explorer不会显示样式，但是BootStrap的媒体查询会出现。这是WordPress的问题还是我做错了什么？此外，如果不在媒体查询中，我的样式确实有效。

@media screen and (min-width: 1024px){
      @media screen and (min-width: 64.000em){
            #imgholder-left{
                padding-right: 0;
             }
            #imgholder-right{
                padding-left: 0;
             }
             #leftimg > img {
                 width: 400px;
              }
              #rightimg > img {
                 width: 600px;
              }
         }
     }

- Mat Teague

---

我认为你不能嵌套媒体查询。 - ckuijjer

嵌套的媒体查询在CSS3中是允许的（但不包括2.1版本）。 - Moob

Answer 1

相反地

@media screen and (min-width: 1024px){
    ...
}

使用这个

@media all and (min-width: 1024px) {
    ... 
} 

- Vitorino fernandes

---

如果因为宽度不足1024而需要一个媒体查询，那就制作网站的默认CSS并且不使用媒体查询... - Cayce K

嗨，Vitorino，感谢您的帮助。查询现在在IE11中显示，谢谢。但是它实际上并没有起作用，因为当分辨率低于1024px时仍然应用样式，并且在更改为最大值时根本不显示。 - Mat Teague

同时将@media screen更改为@media all，嵌套在(min-width: 64.000em)中。 - Vitorino fernandes

谢谢你的帮助，Vitorino，现在它可以工作了 =D。我不得不删除嵌套并将屏幕更改为所有。我讨厌IE，不明白为什么只有所有似乎有效。 - Mat Teague

完美的答案。非常感谢！ - Pawan Pillai

Answer 2

尽管嵌套媒体查询在CSS3（但不是2.1）中被允许，但我可以想象这正是跨浏览器问题的源头。

我不明白为什么您要测试两次min-width，但考虑将它们放在同一个查询中，用逗号分隔表示OR：

@media screen and (min-width: 1024px), screen and (min-width: 64.000em) {
    //if *either* of these are matched then apply these rules
    //...
}

- Moob

---

谢谢你的回复，Moob。这只是我在大学里学习时嵌套查询的方式。 - Mat Teague