使用响应式设计在IE中未显示的图像

Question

所以我有一个网站（请参阅this page - 它已经存在，但即将推出封面），附带两个样式表：一个用于普通样式（style.css ）和一个仅适用于特定的样式（width.css - 或者换句话说：响应式设计）。此表格可确保某些照片不会以较小的屏幕尺寸显示，但会显示在较大的屏幕上。

至少 - 这就是它必须要做的事情，它在Chrome和Firefox中做得很好，但它不在IE（版本11）中。 IE浏览器的开发工具向我显示我的图像的计算属性是display：none和display：inital（我在大多数情况下使用）被划掉，尽管显示：inital在min-width：700px /最小宽度：900px部分。

有没有人可以帮助我？如果您需要更多资源/代码，我很乐意提供它。

提前致谢！

Answer 1

简单地说它没有显示，因为它读取的关于该图像的最新规则是display:none，width.css上的第42行。 Chrome和FF显示它的原因是因为它的ID也比具有规则display:initial的类具有更高的特异性。

我不知道IE为什么.overviewphoto比#opgroot更重要，但看起来可能只需要其中一个？

编辑：正如Desperados_所提到的，IE不支持initial（我确实认为它是一个奇怪的），因此IE无法使用它并且正在渲染none。

快速修复将在ie.css内添加：img#opgroot { display:initial!important; }但我建议不要这样做。

保持代码尽可能简单肯定有助于解决这些跨浏览器的错误。

Answer 2

IE不支持“initial”值。但是，您可以使用“visibility”属性代替display: initial;或其他值来显示属性。