CSS - @media不与Firefox和IE

我有这个简单的媒体查询，检查浏览器的分辨率，并相应显示或隐藏图像工作...但它仅适用于Chrome和Firefox和IE浏览器无法正常工作。任何想法什么是我的代码错了？或者有什么建议我可以做什么？CSS - @media不与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>

来源

2014-01-20 Crazy Programmer

你有？ – Justinas

是的..我也使用过这个以及 –

您是否尝试将'screen'改为'all'（至少用于测试）？ – Justinas

没有看到你的HTML，我会假设你正试图隐藏image用图像和ID？如果是这样，我会做以下。

将img的ID更改为类，例如我们将使用.image-class这意味着该样式可以在页面上的其他图像上重新使用，因为ID必须是唯一的。

所以你的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

来源

2014-01-20 11:14:55 nickspiel

工作得很好... 但即使我复制相同的代码在我的文件..它不起作用!!!!! –

你能发布你的HTML和完整的CSS？必须有东西打破CSS或文件上方的未封闭标签。 – nickspiel

是这样吗？ – nickspiel

尝试display:inline-block;

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

#img{ 
display:none; 
} 
} 

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

#img{ 
display:inline-block; 
}

来源

2014-01-20 11:20:26

CSS - @media不与Firefox和IE

回答

相关问题