了解 css textarea 偏移量

Question

我在 jsfiddle 上用字体大小和行高做了一个简单的文本区域示例。

JSFiddle textarea

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

<textarea>
A
A
A
</textarea>

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

2) 浏览器如何计算文本区域中插入符号的大小？为什么第一行的插入符号比第二行的插入符号小很多？

Answer 1

1) 我认为浏览器在一行上方和下方使用相同的高度。像这样：

-----

A

-----

A

-----

2) 在我的浏览器 (Firefox) 中，插入符号的大小始终相同。

Answer 2

事实证明这是 Chromium 上的一个错误：Cursor line-height bug on inputs

CSS uses what is known as half-leading to render lines of text. This is determ­ined by work­ing out the dif­fer­ence between the line-height and the font-size, divid­ing by 2, and then pla­cing the cal­cu­lated amount of space above and below each line of text. So if you have a font-size of 16px and an effect­ive line-height of 24px, the half-leading would be 4px.

来自 Joshua Hibbert。