修复 Google Chrome 上的蓝线答案

【问题标题】：Fix blue line on Google Chrome修复 Google Chrome 上的蓝线
【发布时间】：2012-03-12 20:25:09
【问题描述】：

我有以下 HTML：

<div id="a"><div id="b">aga ad gdas ga gs ds da dgs sd ds dg gdgsdgwa</div></div>

还有 CSS：

#a, #b {
    position: absolute; 
    height: 10px;
    font-size: 10px;   
    white-space:nowrap;
    display: block;
}
#a {
    width: 200px;   
    overflow: hidden;
}

还有 Javascript：

var x = 0;

setInterval(function() {
    if ($('#b').position().left < (-$('#b').width())) {
        x = 305;
    }
    $('#b').css('left', (x--) + 'px')
}, 50);

在 Firefox 和 Internet Explorer 中运行良好，但在 Google Chrome 17 上，它在句子末尾显示一条蓝线。 See live jsfiddle demo.

我该如何解决？

【问题讨论】：

@Blindy 一些文本可以正常工作，但以a 或w 结尾的文本会显示该行。可能是谷歌浏览器的渲染问题...
在 Chrome 17.0.963.79 m 上看不到任何行。
@j08691 FWIW，我在 mac 上的 17.0.963.79 上看到它
今后请不要使用 jsfiddle 向我们展示非常少量的 CSS 和 HTML。如果 jsfiddle 失败，这篇文章将毫无用处；请在问题中包含相关代码，以便它可以搜索和独立。
@RedDragon 谢谢你，这是一个很有帮助的问题，而且代码内联更好，所以它可以帮助更多的人。另请注意，我在 ie10 Metro 中也得到了类似的工件，所以它不仅仅是 chrome...

标签： javascript jquery google-chrome animation

【解决方案1】：

我很确定这是字体重绘/渲染故障。我在Java中见过它。它可能与您的 JS 和 CSS 关系不大（幸运和不幸）。

诀窍是强制它在产生条纹的地方重新绘制。幸运的是，在这种情况下很容易解决这个问题：只需将 padding-right:1px; 添加到 #b 元素即可。

编辑：您可能需要考虑将此错误提交给 Google/Apple（因为问题出现在 Chrome 和 Safari 中）。

【讨论】：

这行得通。请修复 padding:right 为 padding-right 因为它不会让我通过仅更改答案中的一个字符来提交更改请求。
不会是 WebKit 的共同点吗？
@antony.trupe 我想。无论如何，它现在似乎在 Chrome 和 Safari 中都已修复。

【解决方案2】：

有趣的是，BG 颜色越浅，错误的蓝线越浅。 Font-smoothing 没有修复它。

1px padding-right 修复它（我添加了 -1px margin-right 来补偿）。

http://jsfiddle.net/MqQG3/1/

【讨论】：

字体平滑通常能解决这样的问题吗？
@JeffreySweeney - 可以。看起来问题与字符上的尾部抗锯齿边缘像素有关；从理论上讲，改变平滑类型可以改变这一点。
另外，如果你放大，它实际上看起来就像字体基线处衬线边缘的一个点。

【解决方案3】：

我有一个类似的问题，并使用 Math.floor() 将我的宽度、高度和背景大小属性整数化来解决它...

【讨论】：