瞭解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），插入符總是相同的大小。