css - @media не работает с firefox и IE

Question

У меня есть этот простой медиа-запрос, чтобы проверить разрешение браузера и соответственно отобразить или скрыть изображение ... Но он работает только на Chrome и не работает на firefox и IE. любая идея, что не так с моим кодом? или какие-либо предложения, что я могу сделать?

@media screen and (max-width: 1030px) { 

#img{ 
display:none; 
} 
} 

@media screen and (min-width: 1031px) 
{ 

#img{ 
display:block; 
} 
} 

Вот мой HTML:

<div id="img"><img src="images/bg.png" height="575px" style="position:absolute; margin-left:6px;" style="z-index:100;"/></div> 

Answer 1

Не видя ваш HTML я буду считать, что вы пытаетесь скрыть изображение с и идентификатор image? Если так, я бы сделал следующее.

Измените идентификатор img на класс, например, мы будем использовать .image-class, это означает, что стиль может быть повторно использован на других изображениях на странице, поскольку идентификаторы должны быть уникальными.

Так что ваш HTML должен выглядеть примерно так:

<img class="image-class" src="http://placekitten.com/500/500" alt="kitten" /> 

, а затем для вашего CSS:

/* Mobile first strategy (no media query required) - images will not display when under 1030px)*/ 
.image-class { 
    display: none; 
} 

/* Images will display above 1030px */ 
@media screen and (min-width: 1030px) { 
    .image-class { 
    display: block; 
    } 
} 

Смотреть это fiddle

Answer 2

попробовать display:inline-block;

@media screen and (max-width: 1030px) { 

#img{ 
display:none; 
} 
} 

@media screen and (min-width: 1031px) 
{ 

#img{ 
display:inline-block; 
}