javascript - Chrome JavaScript计算行高，位置不同

Question

我正在制作一个简单的文本阅读器，它有一条线以便于阅读。

它使用键盘向上和向下键每次执行根据行高属性调整红线的“顶部”位置。这是函数。

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';
}

但是，只有 Chrome 似乎有不同的结果。 我该如何解决？

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

Answer 1

同时在 px 中使用 line-height 将解决此问题。

See this working fiddle (我刚刚在 Chrome 上测试过)。

我只更改了你的 css:

line-height: 1.8;

对此:

line-height: 22px;