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的产生。 当我将它们悬停时，图像框的大小会改变（仅为1px）。我真的不知道他们为什么这么做。希望有人能帮助我

Answer 1

这似乎是关系到你的.box的WebKit的过渡滤波器

：悬停

也许这将帮助？ Prevent flicker on webkit-transition of webkit-transform

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

Answer 2

这是由于您的盒子上的webkit转换样式规则设置发生的：悬停选择器。

如果你把它拿出来，那么就没有'闪烁'。因为它不会在Firefox中发生，因为您没有设置诸如-moz-transition之类的firefox供应商属性。

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

Answer 3

在您的网站上使用.box的宽度为20%。看起来这会导致1px的差距。但是，这可以通过使用width: 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; 
}