为什么我的图像在 Chrome 中悬停时会移动？如何修复它？

悬停时图像移动 - Chrome 中的 CSS 不透明度问题

将鼠标悬停在下面链接的网页上的缩略图上时，图像稍微向右移动，这是一个问题仅在 Chrome 中观察到。

http://www.lonewulf.eu

使用了以下 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;

背面可见性影响变换，并且仅为 WebKit 指定此属性就足够了，因为它是 WebKit 特定的问题。可能存在其他供应商前缀。

请参阅 http://css-tricks.com/almanac/properties/b/backface-visibility/ 了解更多信息。

以上是为什么我的图像在 Chrome 中悬停时会移动？如何修复它？的详细内容。更多信息请关注PHP中文网其他相关文章！