Chrome JavaScript计算行高，位置不同答案

【问题标题】：Chrome JavaScript calculate line-height, position differentChrome JavaScript计算行高，位置不同
【发布时间】：2015-05-29 23:57:34
【问题描述】：

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

它使用键盘上下箭头键，每次执行根据 line-height 属性调整红线的“顶部”位置。这是函数。

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/

【问题讨论】：

在 Chrome、Firefox 和 Internet Explorer 中对我来说似乎工作正常。
是的，但只能在 IE11 中使用本机代码。不摆弄。在 Chrome 中，将线条向下移动，然后出现大约 0.x 像素的不同位置

标签： javascript jquery html css google-chrome

【解决方案1】：

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

See this working fiddle（我刚刚在 Chrome 上测试过）。

我只改变了你的css：

line-height: 1.8;

至于：

line-height: 22px;

【讨论】：

感谢以这种方式解决。与相关的字体大小切换有一些问题.. 但解决了刚刚写了所有字体大小行高 css 类。