Question

在我的网站上，我有一个标题，其中包含由背景图像和jQuery悬停事件组成的按钮。问题是，仅在Chrome和Chrome中（在我的测试中），当鼠标悬停在按钮上时，悬停图像会略微缩小一个像素。我已经测试了一些，并意识到它只出现在有滚动条时（为了保持一致性，我添加了溢出-y：滚动到我的所有页面）。如果我从宽度减去半个像素，问题就解决了，但它也与边缘混淆。背景图像大小相同，为102x42px。

这是我的CSS和link to my website：

.menubutton
{
margin:0px auto;
margin-top:-10px;
background:url('../img/buttons/menureg.png');
width:102px;
height:32px;
display:block;
color:#6F6F6F;
font-size:16px;
text-shadow: 0px 0px 1px rgba(0,0,0,0.2);
padding-top:10px;
text-decoration:none;
}
.menubutton:hover
{
background:url('../img/buttons/menuhover.png');
color:#E0E0E0;
text-shadow: 0px 0px 1px rgba(0,0,0,0.75);
}

Answer 1

我确认了这个bug并且喜欢randy我觉得这是chrome的一个问题而不是你的代码。似乎问题出现并消失，因为页面的宽度，如果我调整窗口大小，问题就会出现并消失。

经过一些试验和错误后，似乎问题部分来自封装你的menubutton的大小td元素。在尝试了一些事情后，我发现了一个解决方法。既然您知道td元素和menubutton的大小，则不需要自动边距。所以：

.menubutton
{
margin:0px 24px;
margin-top:-10px;
background:url('../img/buttons/menureg.png');
width:102px;
height:32px;
display:block;
color:#6F6F6F;
font-size:16px;
text-shadow: 0px 0px 1px rgba(0,0,0,0.2);
padding-top:10px;
text-decoration:none;
}

你可以测试一下它是否可以解决问题吗？

Answer 2

我看到了你的问题，但它看起来像是一个chrome bug，而不是代码bug。四分之二的元素都有正确的悬停背景，所以它有点奇怪。您可以尝试在悬停中再次设置元素的宽度，或者使元素1px更宽并设置background-repeat：none;显示额外的像素。不好的解决方案..

奇怪的铬背景图像被切断

2 个答案: