jquery - Chrome JavaScript calculate line-height, position different -

i'm making simple text reader has line easy-reading.

it uses keyboard arrow , down key each excutes adjust 'top' position of red-line based on line-height property. here function.

var line = example.$line[0],     $text = example.$text,     top = parsefloat(line.style.top).tofixed(1) / 1,     lineheight = parsefloat($text.css('line-height')).tofixed(1) / 1;   // key pressed if (move == 'up') {     line.style.top = (top - lineheight) + 'px';     return; } // down key pressed if (move == 'down') {     line.style.top = (top + lineheight) + 'px'; } 

but, chrome seems different results. how can fix it?

http://jsfiddle.net/laires/f93t1ado/

using line-height in px fix issue.

see working fiddle (i tested on chrome).

i have changed css this:

line-height: 1.8; 

to that:

line-height: 22px;