使用javaScript复制时，div之间的行高度不相同

我发现这个问题在我看来就像一个Chrome bug。感兴趣的是，是否有其他人在过去也曾遇到过这种情况，以及是否有任何好的解决方案/解决方法

问题：当我将字体大小和行距从一个div复制到另一个div时，它们看起来不一样：行距似乎不同。请参阅底部的代码笔链接

如何复制： 使用类名

ta source

和

ta target

创建两个

div

或

textarea

，并仅为第一个添加css：

.ta-source{font-size: 1.4rem;line-height:1.42857}

在这两个属性中插入一些多行文本，然后添加javascript，将这两个属性复制到另一个属性，以便它们在样式上匹配：

var lh = window.getComputedStyle(document.querySelector(".ta-source")).lineHeight
var fs = window.getComputedStyle(document.querySelector(".ta-source")).fontSize

document.querySelector(".ta-target").style.lineHeight=lh;
document.querySelector(".ta-target").style.fontSize=fs;

就这样，两条线的高度似乎有所不同。有趣的是，不会出现其他线条高度的问题，例如

线条高度：1.42354

。Firefox或Safari上也没有出现问题

以前有人遇到过这个问题吗

代码笔问题：

var lh=window.getComputedStyle（document.querySelector（“.ta source”））.lineHeight
var fs=window.getComputedStyle（document.querySelector（“.ta source”））.fontSize
document.querySelector（“.ta target”）.style.lineHeight=lh；
document.querySelector（“.ta target”）.style.fontSize=fs
.ta目标，.ta源{高度：200px；空白：预换行；浮点：左}
.ta源{字体大小：1.4rem；行高：1.42857}

这
是
A.
简单的
多种
线
文本
哪里
线
不
排列
和另一个
这
是
A.
简单的
多种
线
文本
哪里
线
不
排列
和另一个
让我们做一些数学计算：

您在
1.4rem
上设置
.ta source
font size
，考虑到根元素的字体大小为
16px
，1.4rem的字体大小将对应于
22.4px

在
.ta source
上，您还可以设置
行高：1.42857
，当行高定义为单位减去数字时，规则是
数字将与当前字体大小相乘以设置行高
；当前字体大小为22.4px，因此相当于
31999968px

现在，当你

var lh = window.getComputedStyle(document.querySelector(".ta-source")).lineHeight
var fs = window.getComputedStyle(document.querySelector(".ta-source")).fontSize

您在
px
中收到两个四舍五入的数字：您在
lh
和
142857
中都没有收到，也没有
3199968px
，但是
32px
和
fs
中没有得到
rem
中的度量值，而是在
px
，
22.4px
中。这些措施适用于
ta目标
，我甚至可以正确地说

实际上，区别在于
ta source
和
1.42857
相当于
31999968px
的行高呈现方式：一些浏览器向上取整，另一些向下取整。Chrome向下取整，Firefox向上取整；Chrome将其四舍五入为31px，FIrefox将其四舍五入为32px（尝试将
.ta source
上的Chrome
行高设置为
32px
，所有内容都将对齐！）

因此，问题在于亚像素渲染问题。您将在google上找到大量文章。
在
窗口中，似乎丢失了
0.1px
。getComputedStyle（）
导致不匹配。很可能是一个Chrome bug。@AnuragSrivastava，谢谢你的输入，我同意这一定是一个Chrome bug。提交了错误报告，链接如下：