javascript - 修复谷歌浏览器上的蓝线

Question

我有以下 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 .

我该如何解决？

Answer 1

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

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

---

编辑:您可能需要考虑将此错误提交给 Google/Apple(因为该问题同时出现在 Chrome 和 Safari 中)。