修復藍線

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

Blue line on Google Chrome

我怎樣才能解決這個問題？

來源

2012-03-12 RedDragon

多麼奇怪的問題... – Blindy 2012-03-12 20:28:23

@Blindy一些文本可以正常工作，但是以'a'或'w'結尾的文本會使行顯示。這可能是谷歌瀏覽器的一些渲染問題... – RedDragon 2012-03-12 20:29:48

在Chrome 17.0.963.79米沒有看到任何線。 – j08691 2012-03-12 20:33:29

我敢肯定，這是一個字體重繪/渲染故障。我在Java中見過它。它可能與你的JS和CSS沒有多大關係（幸運的是，不幸的是）。

訣竅是強制它重繪連勝的地方。幸運的是，在這種情況下很容易修復：只需將padding-right:1px;添加到#b元素即可。

編輯：您可能要考慮將此錯誤提交給Google/Apple（因爲Chrome和Safari均出現此問題）。

來源

2012-03-12 20:31:26

這是有效的。請修正填充：填充權 - 因爲它不會讓我通過在答案中只更改一個字符來提交更改請求。 – RedDragon 2012-03-12 20:44:26

@RedDragon Whups。謝謝你提到這個錯誤。 – 2012-03-12 20:45:29

不是WebKit的共同點？ – 2013-01-29 14:35:57

有趣的是，BG顏色越淡，錯誤的藍線越亮。 Font-smoothing沒有解決它。

1px padding-right修復它（我補充了-1px margin-right來補償）。

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

來源

2012-03-12 20:34:08

字體平滑通常會解決這樣的問題嗎？ – 2012-03-12 20:39:05

@JeffreySweeney - 它可以。看起來問題與角色上的尾隨消除鋸齒邊緣像素有關;在理論上改變平滑類型可以修改它。 – 2012-03-12 21:03:55

另外，如果放大，實際上它看起來像是字體底部襯線邊緣的單個點。 – 2012-03-12 21:09:55

我有一個類似的問題，並使用Math.floor（）來integerise我的寬度，高度和背景大小的性能解決它......

來源

2013-12-16 09:44:45 Kevin

回答

相關問題