html - 使用响应式设计的图像不显示在 IE 中

Question

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

至少 - 这是它必须做的事情，它在 Chrome 和 Firefox 中运行良好，但在 IE(版本 11)中却不行。 IE 的开发工具显示我的图像的计算属性是 display:none 和 display:inital(我在大多数情况下使用)被划掉，尽管 display:inital 在 min-width:700px/min-width: 900px 部分。

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

提前致谢!

Answer 1

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

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

编辑:如 Desperados_ 所述，IE 不支持 initial(我确实认为这是一个奇怪的)，因此 IE 无法使用它并呈现 none 代替。

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

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