当我打开IE开发人员工具时，CSS发生了意外变化

Question

我目前正在IE8上测试一个站点(在虚拟机上运行)。

该网站在:before和:after元素中使用了一些背景图像，它们位于媒体查询:

@media (min-width: 980px) {
    .box:after {
        ...
        background: url('../images/assets/home-create-background.png') bottom right no-repeat;
        ...
    }
}

我正在使用response .js来支持IE8上的媒体查询。媒体查询中的规则在页面加载后立即应用(即:response .js实际上正在工作)。但是，这些图像不显示。

有趣的事情:如果我打开IE开发人员工具(例如。按下F12)，图像突然显示

有人经历过类似的事情吗?你们有什么想法或方向可以探索吗?

---

编辑:

我终于能够解决这个问题，将内容添加到:after伪元素(我已经应用了这个规则，但不是在媒体查询中，并且由于某种原因，它没有应用于IE)

    .box:after {
        ...
        background: url('../images/assets/home-create-background.png') bottom right no-repeat;
        content: " ";
        ...
    }

在任何情况下，我相信这是有趣的知道为什么布局改变，当我打开开发工具…

Answer 1

IE的几个痛点可以被识别，所以值得检查以下内容:

1. 任何console.log()语句将强制IE在显示开发人员工具之前不渲染任何内容。
2. 当你打开IE开发工具时，它默认处于与你习惯的默认视图不同的兼容模式。