Mengapa imej saya bergerak tuding dalam Chrome dan bagaimana saya boleh membetulkannya?

Imej Bergerak pada Tuding - Isu Kelegapan CSS dalam Chrome

Apabila menuding pada lakaran kecil pada halaman web yang dipautkan di bawah, imej bergerak sedikit ke kanan, satu isu hanya diperhatikan dalam Chrome.

http://www.lonewulf.eu

CSS berikut digunakan:

.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;
}

Walaupun isu ini mungkin berkaitan dengan transformasi, penyelesaian yang lebih berkesan ialah menggunakan perkara berikut pada elemen tuding yang menggunakan kelegapan:

-webkit-backface-visibility: hidden;

Pengaruh keterlihatan muka belakang berubah dan menyatakan sifat ini semata-mata untuk WebKit adalah mencukupi kerana ia adalah masalah khusus WebKit. Awalan vendor lain mungkin wujud.

Rujuk http://css-tricks.com/almanac/properties/b/backface-visibility/ untuk mendapatkan maklumat lanjut.

Atas ialah kandungan terperinci Mengapa imej saya bergerak tuding dalam Chrome dan bagaimana saya boleh membetulkannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!