6

我目前正在 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 开发工具（例如按 F12），图像会突然显示。

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

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

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

无论如何，我相信当我打开开发工具时知道为什么布局会发生变化是很有趣的......

4

1 回答 1

4

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

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