悬停时不透明度发生变化时 Google Chrome 中的背景偏移

Question

我用 Jquery 设置了一个悬停效果，它改变了悬停元素的不透明度。它在所有最近的浏览器中都能正常工作，除了 Chrome，它会改变 body 元素的背景。

这是链接：http://wrong.ro/tataia/

我的工作环境如下：Google Chrome v18.0.1025.162 / Windows 7 x64。

有什么解决方法吗？提前致谢！

Answer 1

我经历了非常接近此的事情，在我的情况下，更改悬停时的不透明度会导致前景图像元素摆动。看起来特定原因与使用转换（我正在使用）有关。修复很简单 - 在我添加的相关 img 元素上：

-webkit-backface-visibility: hidden;

没有更多的摆动。我不熟悉它的实际作用，但它没有任何奇怪的副作用并解决了问题。

我还看到了一个我没有尝试过的替代解决方案 - 显然其他人已经经历过这个并使用旋转修复它：

-webkit-transform: rotate(0);
-moz-transform: rotate(0);
transform: rotate(0);

Answer 2

我终于可以在 Chrome 中看到问题了。它非常微妙，因此除非您确切地知道您在寻找什么，否则很容易错过。

我仍在处理其余问题，但是当我将鼠标悬停在中下部的“stiati ca”徽标上时，我可以看到背景在图像左侧稍微移动了一点。

问题似乎与您的 CSS 的 background-size 部分有关。如果我删除 background-size 行，问题就完全消失了。我并不是说这是问题的真正原因，但这是第一个线索。我在调查的这一点上的猜测（答案稍后会更多）是悬停中的某些东西导致文档大小发生变化，从而导致背景重新缩放并因此发生变化：

body {
    background: black url('../img/bck.jpg') left top fixed no-repeat;
    moz-background-size: cover;
    background-size: cover;
    -ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/bck.jpg', sizingMethod='scale')";
     filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/bck.jpg', sizingMethod='scale');
}

进一步追求这一点，我发现如果我从这个 CSS 块中注释掉 text-indent 行：

a#stiati_ca{
    display: block; width: 124px; height: 124px;
    xtext-indent: -9999em;
    background: url('../img/stiati_ca.png') no-repeat;
    margin: 88px auto 0;
}

然后，将鼠标悬停在徽标上时，问题就完全消失了。当然，您的链接中有一些文本显示我猜您不想看到，但您可以修复 HTML 以不同的方式工作。我建议使用其中包含固定大小 div 的链接（链接中没有文本），然后在 div 上而不是在链接本身上设置背景图像。无论如何，这是一种更安全的跨浏览器方式，您不需要文本缩进行，并且徽标图像的背景移动问题应该消失。如果您确实需要链接中的文本但不希望它显示，则将其放入跨度并使用display: none 使跨度不可见。无论哪种方式，您都不应在<a> 上设置背景图像，而应在链接内具有适当大小的元素上设置背景图像。这应该会更好。

我还没有弄清楚为什么前四张图片会出现同样的问题。如果我弄清楚了，我会添加到我的帖子中。