Imbrication of min-width min-height doesn't work on IE

Question

I have IE11 and Chrome. In my css, I have an imbrication of media min-height min-width and it's works but not on IE11.

This is the code :

@media (min-width: 0) and (max-width: 992px) {

    @media (min-height: 0) and (max-height: 480px) {
        #menu_fixed_left {
            height: 30vh !important;
        }
    }
}

So, this is my question, does it work on IE ? Because I can't have a proper code.

`@media screen and (max-width: 992px) and (max-height: 480px) { //your rules}` you can simplify to this.. give it a try. — Joel Almeida, Jul 09 '15 at 09:28
But I have others rules between both @media and I don't want to copy them :/ There isn't an other way ? — Martel Benjamin, Jul 09 '15 at 09:30
possible duplicate of [Nesting @media rules in CSS](http://stackoverflow.com/questions/11746581/nesting-media-rules-in-css) — areim, Jul 09 '15 at 09:35
You do know you can omit the values that are 0, right? Also, this way your code will get messy very quickly. — somethinghere, Jul 09 '15 at 09:35
Ok I see Opera and IE doesn't support this. thanks. I use the @JoelAlmeida solution — Martel Benjamin, Jul 09 '15 at 09:38
To @somethinghere Yes I know for the 0 but it's work on chrome and not IE and I didn't know why but kamienok answer me :) — Martel Benjamin, Jul 09 '15 at 09:40

score 1 · Accepted Answer · answered Jul 09 '15 at 09:40

You can omit the values that are 0, just like @somethinghere told you in the comments.

Also, we can remove the nest because that won't work in Opera and IE like you figured out.

So, we can use this :

@media screen and (max-width: 992px) and (max-height: 480px) { //your rules}

Imbrication of min-width min-height doesn't work on IE

1 Answers1