jQuery中的小故障文本动画答案

【问题标题】：Glitchy text animation in jQueryjQuery中的小故障文本动画
【发布时间】：2012-02-13 15:22:58
【问题描述】：

我有文本链接，它们使用 CSS 在 hover 上改变颜色并使用 jQuery 向左移动。

大多数情况下它都可以正常工作，但是当文本以大写“A”开头时，它会在文本字符后面留下一条奇怪的痕迹。这发生在 webkit 浏览器中（但不是 Firefox）。

You can see it in action with this jsFiddle

有什么办法可以解决这个问题吗？

【问题讨论】：

只是一个注释无法让动画在 IE 9 兼容模式下工作。
似乎斜体字是我的原因。删除它也会删除工件。

标签： jquery animation text visual-glitch

【解决方案1】：

哇，我的第一感觉是对的：在侧面添加一个小填充，效果很好： http://jsfiddle.net/k3vnd/1/

不知道怎么解释，只是提醒编程背景的错误。我认为这是内部 webkit 问题。

【讨论】：

由于某种原因，它只适用于 2px 或更多的填充； 1px 不能解决问题...

【解决方案2】：

我不知道为什么会这样，但在链接周围放置少量填充似乎可以解决问题：

.links {

    position:absolute;
    left:20px;
    margin-top:25px;
    font-size:16.5pt;
    font-family: Garamond, Palatino, sans serif;
    font-style:italic;
    padding: 1px;    /* <=== added this line */

}

在这里查看它的工作原理：http://jsfiddle.net/jfriend00/LvT2h/

【讨论】：

在 Safari 5 中不起作用。仍然在 A 上找到开始行
是的，我仍然在 Chrome 和 Safari 中遇到问题
奇怪，在我的 Chrome 中它使用 1px。也许这取决于选择/渲染的确切字体。