php - img在css图片墙上闪烁

Question

我正在为大学做这个元素。我目前面临一个小问题，但仍令人不安。

网站链接:http://haw.finekost.com/ws2013/PP_HATE_SITE/

CSS:

.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;
    padding-bottom: 20%;
    position: relative;
    webkit-filter: grayscale(1);
    width: 20%;
}

.box:hover {
    cursor: pointer;
    moz-filter: all .5s ease-in-out;
    opacity: 1;
    webkit-filter: grayscale(0);
    webkit-transition: all .5s ease-in-out;
}

img {
    height: 100%;
    left: 0;
    position: absolute;
    width: 100%;
}

盒子是通过 php 生成的。 当我将它们悬停时，图像框的大小会发生变化(仅 1 像素)。我真的不知道他们为什么这样做。希望有人能帮助我

Answer 1

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

也许这会有所帮助？ Prevent flicker on webkit-transition of webkit-transform

实际上如果你添加 -webkit-backface-visibility: hidden;到框:悬停 css 看来这将解决问题。