為什麼圖像在 Chrome 中懸停時向右移動，以及如何修復它？

懸停時的圖像移動：解決Chrome 中的不透明度問題

用戶報告了懸停時圖像稍微向右移動的問題，但僅限於Chrome。此問題是由於使用不透明度來控制影像透明度而引起的。

檢查CSS

為了調查該問題，我們檢查提供的CSS：

<code class="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;
}</code>

解決問題

另一個解決方案是在不透明的懸停元素上使用-webkit-backface-visibility 屬性。此屬性會影響元素背面在變換時的渲染方式。在這種情況下，它解決了 Chrome 中不透明度變更導致的意外移動。

將以下屬性套用於懸停狀態：

<code class="css">-webkit-backface-visibility: hidden;</code>

其他注意事項

-webkit-backface-visibility 屬性特定於WebKit 瀏覽器，因此您可能需要其他引擎的供應商前綴。有關更全面的信息，請參閱 CSS-Tricks 文件。

以上是為什麼圖像在 Chrome 中懸停時向右移動，以及如何修復它？的詳細內容。更多資訊請關注PHP中文網其他相關文章！