了解css textarea偏移量

Question

我在jsfiddle上用font-size和line-height做了一个textarea的简单示例。

JSFiddle textarea

textarea { 
    font-size: 20px; 
    line-height: 4; 
    height: 260px; 
} 

<textarea> 
A 
A 
A 
</textarea> 

1）如何浏览器计算AREA_1高度和AREA_2高度？他们为什么不同？

2）浏览器如何计算textarea中的插入符号大小？为什么第一行的插入符号要比第二行的小得多？

Answer 1

事实证明，它是在铬的错误：Cursor line-height bug on inputs

CSS使用所谓的半领先渲染文本行。通过计算 行高和字体大小之间的差值除以2，然后将 计算的空间量放在每行文本上方和下方，可以确定此 。因此，如果您的字体大小为16px，并且有效的行高为24px，则 的前半部分为4px。

通过Joshua Hibbert。

Answer 2

1）我认为浏览器使用高于和低于一行的高度相等。如下所示：

----- 

A 

----- 

A 

----- 

2）在我的浏览器中（Firefox），插入符总是相同的大小。