修复 Google Chrome 上的蓝线

我有以下 HTML：

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

And 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 上它在句子末尾显示一条蓝线。查看现场 jsfiddle 演示 http://jsfiddle.net/ujr8V/1/.

我该如何修复它？

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

诀窍是迫使它在产生条纹的地方重画。幸运的是，在这种情况下很容易解决这个问题：只需添加padding-right:1px; to the #b元素。

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