Php css图片墙上闪烁的img

我为大学做这个项目。我目前面临一个小问题，但仍然令人不安

链接至网站：

CSS:

这些框是通过php生成的。

---

当我将图像框悬停时，它们的大小会发生变化（仅1px）。我真的不知道他们为什么这么做。希望有人能帮助我

它似乎与您的.box:hover中的webkit转换过滤器有关

也许这会有帮助？

---

实际上，如果您添加-webkit backface可见性：hidden；对于box:hover css，这似乎可以解决问题。

这是由于在box:hover选择器上设置了webkit转换样式规则造成的

如果你把它拿出来，那么就没有“闪烁”。在Firefox中不会发生这种情况的原因是，您没有在其中设置Firefox供应商属性，例如-moz transition

---

在这种情况下，您为什么需要转换？

在您的网站中，您用于

.box

的宽度为

20%

。看起来这在某种程度上造成了1px的间隙。但是，这可以通过使用

宽度：20vw

来解决

.box

。

vw

是以%表示的视口宽度，这删除了1px边框

因此，请使用：

.box {
    filter: grayscale(1);
    float: left;
    height: 0;
    margin: 0;
    moz-filter: grayscale(1);
    ms-filter: grayscale(1);
    o-filter: grayscale(1);
    opacity: 0.5;
    position: relative;
    webkit-filter: grayscale(1);
    padding-bottom: 20vw;
    width: 20vw;
}

---

在OSX上的Firefox中，它们实际上并不存在，在Chrome中，它们会消失，如果你真的需要webkit转换来优雅地转换成悬停图片。移除“全部”，它应该可以正常工作。

.box {
    filter: grayscale(1);
    float: left;
    height: 0;
    margin: 0;
    moz-filter: grayscale(1);
    ms-filter: grayscale(1);
    o-filter: grayscale(1);
    opacity: 0.5;
    position: relative;
    webkit-filter: grayscale(1);
    padding-bottom: 20vw;
    width: 20vw;
}