CSS-.id :hover a:before items jumping around

Question

我有一个列表，其中包含 3 个水平列表，其中包含 a:before 和 a:hover。悬停时，元素会在它固定在它的位置之前跳来跳去。尝试了 3 种流行的浏览器。有任何修复的想法吗？

.twitter a:before{
content: url(.jpg);
padding-right: 10px;
position: relative;
bottom: -.4em;}

.twitter:hover a:before {
content: url(.jpg);
padding-right: 10px;
position: relative;
bottom: -.4em;}

http://nobodyfilm.org - 中间部分 twitter - facebook - 预告片按钮。如果我没记错的话，它只会在您第一次加载网站时发生。

Answer 1

这可能是由于加载图像造成的。它会消失片刻，直到加载 :hover 图像。如果你设置了它的宽度和高度，它应该不会跳来跳去，只是暂时消失。

相反，您可以将它们放在一个 sprite 中，然后设置位置以适合图像的正确部分。