About adjusting the input cursor size in input

I encountered a problem in the project before.

The input text box is simulated with a background image. It sets the same height as line-height to enable the input text to be centered,

When you click input, the input cursor is actually as high as the height of input, but when you start to input text, the cursor becomes as high as the text,

The cursor is as high as the input height in chrome,

The cursor in IE is the same as the text size.

I have never figured out why this is the case. Today, I only learned the reason after hearing a discussion from Luo yunli.

The preliminary conclusions are as follows:

IE: The cursor height is consistent with font-size regardless of whether the row contains text.

FF: When the row contains text, the cursor height is the same as font-size. When this row has no text, the cursor height is the same as the input height.

Chrome: When the row has no text, the cursor height is the same as line-height; when the row has text, the cursor height ranges from the top of the input to the bottom of the text (both cases are when line-height is set). If line-height is not set, it is consistent with font-size.

Solution:

Set a small height for the input height, and then fill it with padding, which can basically solve the problem of all browsers.

  input  {  
 height  :   16px  ;   
 padding  :   4px 0px  ;   
 font-size  :   12px  ;   
  }