Question

我正在重新设计主题的布局，它在Chrome和Safari中可以正常工作，但是产品的图像在Firefox悬停时消失了。

首先我认为是造成问题的原因是缩放，但是缩小时它确实起作用（transform：scale（0.5）;）

另一个奇怪的事情是，以下各节中的其他图像没有这样的问题

请帮助，谢谢

链接到主题预览：http://hongyuan.theme.yurl.vip/
（有问题的产品在幻灯片下）

Answer 1

这听起来确实像是个错误，尤其是使用25 36 70 95 target 112 1.732051 0.000000 1.732051 3.464102 101 3.464102 1.732051 0.000000 1.732051 121 5.196152 3.464102 1.732051 0.000000 201 6.928203 5.196152 3.464102 1.732051属性。

您要将包装器的text-overflow元素的font-size设置为<a>，您还说文本不应该溢出，并且溢出的文本内容应该用省略号0代替。当您应用…时，由于scale(1.1)规则而被视为文本的内部<img>元素会溢出。这就是display: inline算法的作用，并使您的图像消失：

text-overflow: ellipsis

a {
  font-size: 0px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  width: 120px;
  height: 120px;
}
a > img {
  display: inline;
  transition: transform .3s linear;
  max-width: 100%;
  max-height: 100%;
}
a > img:hover {
  transform: scale(0.9);
}
a.no-ellipsis {
  text-overflow: clip;
}

要解决该问题，您可以采用多种方式，包括代码段（ellispis: <a> <img src="https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png"> </a> no ellipsis: <a class="no-ellipsis"> <img src="https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png"> </a>中的一种，将text-overflow: clip显示为<img>或设置包装器的{{1} }到block，可能还有其他...

Firefox缩放图像消失

1 个答案: