媒体查询在firefox和

Question

Ok so my media query is working fine in chrome, but when I try the code in firefox or ie, the margin-top or margin-left are different and not accurate like in chrome !!!

Here's the code I use:

 @media screen and (max-width:800px) { 
    #box-move {
        margin-left:-20px;
        margin-top:40px; 
    } 
 }

So is there a special tecnique for firefox or ie?

Thanks.

Answer 1

It's actually not a CSS or CSS interpretation problem at all–it's the way Firefox does (or doesn't) resize the viewport.

Unlike Google Chrome, and most other browsers, Firefox allows it's toolbars to affect viewport size. The only way to make the viewport resize below the width of your toolbars in Firefox is to disable them.

You'll need to go to View > Toolbars and uncheck each. Then try resizing and watch your media queries take effect.

I hope I explained that right. It's been a trying day!