[英]CSS changes unexpectedly when I open IE Developer Tools
我目前正在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时,知道为什么布局会发生变化很有意思......
可以识别IE的几个痛点,因此值得检查以下内容:
console.log()
语句都会强制IE不呈现任何内容。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.