Html css动画字体上奇怪的蓝色和橙色边缘

我看到一些奇怪的行为，在一个完整的酒吧符号动画使用CSS3。在某些浏览器中，符号沿其侧面展开蓝色和橙色边缘。我还不知道为什么

CSS:

HTML:

█

示例页：-这种效果似乎是在短时间内形成的。

哦，讽刺的是

在我看来，这真的像是一个浏览器错误。我能够在Chrome 23.0.1271.95 m中偶尔复制它。这看起来确实是一个问题，字符稍微溢出了预期区域，外部区域没有正确重新绘制。正方形左侧的蓝色最有意义，当突出显示文本时，清除突出显示（蓝色）左侧将留下一条1px的蓝线。还请注意，当高亮显示单个矩形字符时，高亮显示的左右两侧大约会丢失1px

我尝试的一件事是在文本周围添加一个1px的黑色边框：

span#textblink {
    color: #FFF;
    animation: colorPulse 0.2s infinite alternate;  
    -moz-animation: colorPulse 0.2s infinite alternate; 
    -webkit-animation: colorPulse 0.2s infinite alternate;
    -o-animation: colorPulse 0.2s infinite alternate;

    border: 1px solid black;
}

这似乎解决了这个问题，但正如我们所看到的，这个问题是零星的，所以它可能刚刚躲过了我的测试

否则，您可能会遇到以下三种选择之一：

• 正在查找另一个稍小的字符（可能使用不同的字体）
• 使用jQuery设置角色动画
• 如果所有其他操作都失败，请使用gif

哦，真是讽刺

在我看来，这真的像是一个浏览器错误。我能够在Chrome 23.0.1271.95 m中偶尔复制它。这看起来确实是一个问题，字符稍微溢出了预期区域，外部区域没有正确重新绘制。正方形左侧的蓝色最有意义，当突出显示文本时，清除突出显示（蓝色）左侧将留下一条1px的蓝线。还请注意，当高亮显示单个矩形字符时，高亮显示的左右两侧大约会丢失1px

我尝试的一件事是在文本周围添加一个1px的黑色边框：

span#textblink {
    color: #FFF;
    animation: colorPulse 0.2s infinite alternate;  
    -moz-animation: colorPulse 0.2s infinite alternate; 
    -webkit-animation: colorPulse 0.2s infinite alternate;
    -o-animation: colorPulse 0.2s infinite alternate;

    border: 1px solid black;
}

这似乎解决了这个问题，但正如我们所看到的，这个问题是零星的，所以它可能刚刚躲过了我的测试

否则，您可能会遇到以下三种选择之一：

• 正在查找另一个稍小的字符（可能使用不同的字体）
• 使用jQuery设置角色动画
• 如果所有其他操作都失败，请使用gif

---

这些“某些浏览器”是。。。？不知何故，我不认为Lynx或telnet端口80会受到影响…使用safari 6.0.2和ff 17.0.1进行测试-没有任何问题，没有进行详尽的测试。Windows版本上出现问题：Chrome 22.0.1229.26 Safari 5.1.7这些“某些浏览器”可能是。。。？不知何故，我不认为Lynx或telnet端口80会受到影响…使用safari 6.0.2和ff 17.0.1进行测试-没有任何问题，没有进行详尽的测试。Windows版本出现问题：Chrome 22.0.1229.26 Safari 5.1.7感谢您对问题的分析。这是有道理的——我能够在safari和Chrome中重现这一点，所以可能是webkit问题。我们已经向谷歌和苹果报告了这个问题，并将按照您的建议解决。感谢您对这个问题的分析。这是有道理的——我能够在safari和Chrome中重现这一点，所以可能是webkit问题。已向谷歌和苹果报告，并将按照您的建议提供解决方案。

span#textblink {
    color: #FFF;
    animation: colorPulse 0.2s infinite alternate;  
    -moz-animation: colorPulse 0.2s infinite alternate; 
    -webkit-animation: colorPulse 0.2s infinite alternate;
    -o-animation: colorPulse 0.2s infinite alternate;

    border: 1px solid black;
}