当我打开IE Developer Tools时，CSS意外地改变了

Question

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

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

@media (min-width: 980px) {

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

我正在使用respond.js为IE8上的媒体查询提供支持。 一旦页面加载（即：respond.js实际上正在工作），就会应用媒体查询中的规则。但是，此图像不会显示。

有趣的是：如果我打开IE Developer Tools（例如按F12），图像会突然显示。

任何人都有过类似的经历吗？ 你们有什么想法或方向去探索吗？

---

修改 我终于能够解决这个问题，将内容添加到：after伪元素（我已经应用此规则，但不在媒体查询中，并且由于某种原因，它不适用于IE）

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

无论如何，我相信当我打开Dev Tools时，知道为什么布局会发生变化很有意思......

Answer 1

可以确定IE的几个痛点，因此值得检查以下内容：

1. 在显示开发人员工具之前，任何console.log()语句都会强制IE不呈现任何内容。
2. 当您打开IE Dev工具时，默认情况下它与您习惯的默认视图处于不同的兼容模式。