1

在我的网站上，我有一个带有由背景图像和 jQuery 悬停事件制成的按钮的标题。问题是，仅在 Chrome 和 Chrome 中（在我的测试中），当将鼠标悬停在按钮上时，悬停图像会被略微切断大约一个像素。我已经对其进行了一些测试，并意识到它仅在有滚动条时才会出现（为了保持一致性，我添加了 overflow-y: scroll to my all pages）。如果我从宽度中减去半个像素，问题就解决了，但它也会弄乱边距。背景图像大小相同，均为 102x42 像素。

这是我的 CSS 和我网站的链接：

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

2 回答 2

3

我确认了这个错误，就像兰迪一样，我认为这是 chrome 的问题，而不是你的代码。似乎问题出现和消失是因为页面的宽度，如果我调整窗口大小，问题就会出现和消失。

经过一些试验和错误后，问题似乎部分来自封装菜单按钮的 size td 元素。在尝试了一些事情之后，我找到了一个解决方法。由于您知道 td 元素和菜单按钮的大小，因此不需要自动边距。所以：

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

你能在你身边测试一下，看看它是否能解决问题吗？

于 2012-09-23T20:27:47.950 回答
0

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

于 2012-09-23T20:16:37.647 回答