CSS 媒体查询在 Internet Explorer 11 中不起作用

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/26059414/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-30 02:37:14  来源:igfitidea点击:

Media Queries not working in Internet Explorer 11

cssmedia-queriesinternet-explorer-11

提问by Mat Teague

Hi guys I am currently creating my portfolio website in WordPress at www.yewtreeweb.co.uk. However I am having a problem with getting media queries to work in Internet Explorer 11.

大家好,我目前正在 WordPress 中创建我的投资组合网站www.yewtreeweb.co.uk。但是,我在使媒体查询在 Internet Explorer 11 中工作时遇到了问题。

When I add the media queries the style does not display in the inspect element console of Internet Explorer however BootStrap's media queries do appear. Is it something to do with WordPress or am I doing something wrong?

当我添加媒体查询时,样式不会显示在 Internet Explorer 的检查元素控制台中,但会出现 BootStrap 的媒体查询。这与WordPress有关还是我做错了什么?

Also my styling does work if out of the media query.

如果在媒体查询之外,我的样式也确实有效。

@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;
              }
         }
     }

回答by Vitorino fernandes

instead

反而

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

use this

用这个

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

回答by Moob

Although nested media queries areallowed in CSS3(but not 2.1) I can imagine that this is exactly the sort of thing that has cross-browser issues.

尽管CSS3(但不是 2.1)允许嵌套媒体查询但我可以想象这正是具有跨浏览器问题的那种事情。

I don't understand why you are testing min-width twice but consider putting them in the same query, comma-separated to signify an OR:

我不明白你为什么要测试 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
    //...
}