Media Queries not working in Internet Explorer 11 [duplicate]

人盡茶涼 提交于 2019-11-28 00:11:28

问题


This question already has an answer here:

  • Nesting @media rules in CSS 1 answer

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.

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?

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

回答1:


instead

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

use this

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



回答2:


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

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:

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


来源:https://stackoverflow.com/questions/26059414/media-queries-not-working-in-internet-explorer-11

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!