Chrome JavaScript calculates line-height, position is different

I am making a simple text reader, it has a line for easy reading.

It uses the up and down keyboard arrows, each of which adjusts the "top" position of the red line based on the line-height property. Here is the 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; 

// UP 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 only chromium presents different results. How can I fix this?

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