我的页面似乎有问题：
当鼠标悬停在缩略图上时，图像会向右移动，这只会在Chrome浏览器上发生。
我的css：
.img{
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;
display:block;
border:1px solid #121212;
}
.img:hover{
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter:alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
-khtml-opacity: 1;
display:block;
}
另一种解决方案是使用
-webkit-backface-visibility: hidden;
关于带有不透明度的悬停元素，backface-visibility与transform有关，因此@Beskow的回答与此有关。由于这是一个Webkit特定的问题，你只需要为Webkit指定backface-visibility即可。还有其他供应商前缀。
更多信息请查看http://css-tricks.com/almanac/properties/b/backface-visibility/。
backface-visibility属性必须设置在img元素上。在我的情况下，具有不透明度的元素是a元素，它包裹了img，所以你的答案对我来说并不完美。顺便说一句，我在Mac上的Firefox浏览器中也发现了此问题，因此建议使用每个供应商的前缀。 - Oliboy50div。@alpipego 感谢解决方案！ - bonflashz-index，以使悬停效果对我起作用。 - Jack由于某些原因，Chrome会以不透明度为1的元素位置不同的方式来解释它们。如果您将CSS属性position:relative应用于您的a.img元素，则它们在透明度变化时就不会有左/右移动了。
relative 没有解决它，但在元素上设置以下代码可以解决问题：transform: translate3d(0px,0px,0px); - ConorLuddytransform: translate3d(0px,0px,0px);解决了它。 - zevnicsca我遇到了同样的问题，我通过CSS transform rotate解决了它。 就像这样：
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
transform: rotate(0);
它在主要浏览器中运行良好。
对我有效的另一个解决方案是添加规则：
will-change: opacity;
translateZ(0)导致的像素跳动问题，尽管在Chrome中修复了问题。translateZ(0)、rotate(0)、translate3d(0px,0px,0px)等）的解决方案都通过将元素的绘制交给GPU来实现更有效的渲染。 will-change为浏览器提供了一个提示，它可能具有类似的效果（使浏览器更有效地渲染过渡），但感觉不像黑客（因为它明确地解决了问题，而不仅仅是推动浏览器使用GPU）。will-change好（尽管如果只有Chrome才有问题，那么这可能是一件好事！），在某些情况下会引入自己的问题，但仍然是解决此问题的另一个可能的方法。我需要同时应用 backface-visibility 和 transform 规则来防止这种故障。
像这样：
a {-webkit-transform: rotate(0);}
a img {-webkit-backface-visibility: hidden;}
我在鼠标悬停时遇到了（非不透明）滤镜的类似问题。通过在基础类中添加规则进行修复：
filter: brightness(1.01);
backface-visibility（或-webkit-backface-visibility）仅在Chrome中解决了问题。为了在Firefox和Chrome中都修复该问题，我使用了上述答案的以下组合。
//fixes image jiggle issue, please do not remove
img {
-webkit-backface-visibility: hidden; //Webkit fix
transform: translate3d(0px,0px,0px); //Firefox fix
}
opacity:0.99999999;
我在一个网格中遇到了图片问题，每个图片都嵌套在一个声明了display: inline-block的元素中。Jamland上面发布的解决方案可以在父元素上声明display: inline-block;来纠正该问题。
我有另一个网格，其中的图片位于无序列表中，我只需要在父列表项上声明display: block;和width，并在图像元素上声明backface-visibility: hidden;，悬停时似乎没有任何位置偏移。
li { width: 33.33333333%; display: block; }
li img { backface-visibility: hidden; }
22.0.1229.94 m上无法移动。 - Danny