Question

我正在为一家餐馆建立一个网站，我发现Chrome上有一个小故障。

在Chrome中，当您一直滚动到页面底部并显示子菜单时，当您将鼠标悬停在文本上时，它似乎上下移动，我编程的唯一悬停操作是不透明度更改。我不确定为什么会这样。

编辑：我发现它与我的

有关

.nav ul li a:hover {
    opacity: .6;}

删除后不会激活悬停效果，这不再发生..

更具体地说，我认为它与

有关

    -webkit-transition: opacity .2s ease-in-out;
-moz-transition: opacity .2s ease-in-out;
-ms-transition: opacity .2s ease-in-out;
-o-transition: opacity .2s ease-in-out;
transition: opacity .2s ease-in-out;

Answer 1

问题最终成为webkit的一个问题，其中不透明度转换使得一切都在我脑中移动1px

解决方案是

    -webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: rotate(0);

image moves on hover - chrome opacity issue

悬停时不需要的文本移动

1 个答案: