修复Google Chrome上的蓝线

我有以下HTML：

aga ad gdas ga gs ds da dgs sd ds dg gdgsdgwa

和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上，它在句子末尾显示一条蓝线。查看live jsfiddle demo 。

Google Chrome上的蓝线

我该如何解决？

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

诀窍是强制它重绘条纹的位置。幸运的是，在这种情况下很容易解决：只需添加padding-right:1px; 到#b元素。

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

有趣的是，BG颜色越浅，错误的蓝线就越亮。字体平滑没有解决它。

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

我遇到了类似的问题并使用Math.floor（）来解决它我的宽度，高度和背景大小属性…