将鼠标悬停在缩略图上时,图像会向右移动一点,并且仅在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;
在具有不透明度的悬停元素上。背面可见性与有关transform,由于这是特定于Webkit的问题,因此只需要指定webkit的背面可见性即可。还有其他供应商前缀。
transform