我目前正在 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: " ";
...
}
无论如何,我相信了解为什么在我打开开发工具时布局会发生变化是很有趣的......
最佳答案
可以确定 IE 的几个痛点,因此值得检查以下内容:
- 任何
console.log()
语句都将强制 IE 在显示开发人员工具之前不呈现任何内容。 - 当您打开 IE Dev 工具时,它默认处于与您习惯的默认 View 不同的兼容模式。
关于打开 IE Developer Tools 时 CSS 意外更改,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15475973/