4

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

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

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

一些CSS代码

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

5 回答 5

5

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

于 2014-08-19T07:03:35.757 回答
2

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

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

让我知道结果如何。

于 2013-11-13T15:16:07.783 回答
1

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

于 2019-04-17T04:45:30.307 回答
1

只是为了跟进这个问题，Mary 的答案是正确的，但对于我们的情况，重要的是不要设置宽度和高度以保持响应能力。但显然将宽度和高度设置为auto也同样有效，尽管它在外观上没有任何区别。

于 2020-02-10T09:43:42.290 回答
0

因此，由于在某些情况下打开 Web Inspector 会调整页面大小，因此您应该查看：

  • 在 JavaScript 端调整处理程序的大小，这可能会导致您的图像显示
  • 满足特定宽度且仅在 CSS 端显示图像的媒体查询
  • 图片元素的媒体查询未覆盖您正在查看的宽度。

对我来说，这是 Picture 元素在其媒体属性定义 ( <source media=(min-width: 1824px)">) 中存在差距。

于 2022-01-14T16:38:58.697 回答