悬停在锚标记上的CSS背景图像重复

Question

我在Mac上遇到了这个问题，最近我只有macs也有更大胆的字体问题，但是这已经通过CSS修复了。

问题：我有10个锚标签绝对定位，当悬停时（绿色背景图像），PC上没有任何重叠问题，但几乎在每个浏览器的Mac上都没有，背景图像与下一个句子略有重叠。

上面的CSS（悬停）：

.homeText a:hover {

    background-image: url('/cont-img/on-hover-span_background-partial-solid.jpg');
    color: White;
    cursor: pointer;
    background-position: center;
    background-repeat:repeat;
    margin-right:-5px;
    font-style: italic;
}

每个元素的CSS绝对定位在句子之间有足够的空间，所以这不是问题。此外，最后的时段是2个不同图像的精灵，悬停时的白色时段和悬停时的灰色时段。为此，我将一个css类附加到锚标记末尾的span标记，该标记用于设置span标记中sprite的背景位置。

有什么想法吗？

Answer 1

确保您拥有padding:0; margin:0;，并确保<a>在此期间后不包含空格或内容。另外，你为什么要使用背景图片？你不能只设置background-color:green吗？...你可能想尝试一下，看它是否有所不同。

Answer 2

我认为这只是一个字体问题。当我在Linux中访问您的站点时，链接之间的空间比Windows中的空间要大得多。

顺便说一句，也许有点偏离主题，但您的网站不能很好地处理非白色背景颜色。您可能希望自己设置背景颜色，而不是依赖于用户的默认颜色。

Answer 3

由于我在每个锚点内都有一个span标记，我意识到在Timmerz的帮助下我必须从每个案例中删除填充和右边距。我得到更多背景图像重叠的最重要原因是因为跨度的宽度对于周期仅占用的像素量而言不必要地大，从而为重叠创造了更多空间。

将间距设置为与精灵中的图片成比例的宽度后，我向右边添加了一个小填充，因此背景图像没有太靠近精灵。此外，由于上述调整，我不得不调整我在正确案件中的绝对位置。

感谢大家的贡献。