在我单击inspect元素之前，图像未显示在Chrome中

Question

我在Chrome中使用我的OpenCart网站遇到了一个奇怪的错误。产品图像没有显示，但我看到它们应该到达的白色区域。

如果产品没有图像，则它与左边对齐，但在这种情况下，我可以看到图片通常所在的白色区域。

这是疯狂的部分，如果我点击检查元素，突然出现图像。

一些css代码

.product-list .image {
float: left;
margin-right: 10px;
overflow: auto;
}

Answer 1

在CSS中，您需要设置宽度和高度属性。

Answer 2

这很奇怪。无论如何，要检查的事情：

1. Z-index：图像周围的外框可能位于图像本身的“上方”。将z-index添加到图像中，值为9999以检查
2. 位置：如果是父容器或上帝知道还有什么奇怪的位置，它可能会影响子元素的位置，在这种情况下是图像出现。
3. 禁用JS - Javascript可能会导致此处出现问题，请尝试禁用它进行检查。
4. 此外，当您使用chrome dev工具时，您在技术上“悬停”在图像上。你说它突然出现了。所以我会看一下你的：悬停规则，因为它们适用于图像。许多网站将使用精灵技术，在正常状态下显示一个图像，然后在悬停时将背景移动到同一图像的不同部分。您的正常状态可能为空，然后悬停将bkgd位置移动到您想要的图像。

让我知道结果如何。

Answer 3

就此问题进行跟进，玛丽的答案是正确的，但是对于我们的情况，重要的是不要设置宽度和高度以保持响应能力。但是显然，将宽度和高度设置为自动也可以，即使外观没有差别。

Answer 4

更多方案可以复制此问题 1.关闭检查是否尚未打开。 2.调整大小，如果已经打开。 3.调整浏览器窗口的大小。