html에서 input 안의 입력 커서 크기를 어떻게 조정합니까

예전에 프로젝트에서 문제에 부딪힌 적이 있어요.
input 입력 상자는 배경 그림으로 시뮬레이션을 하고 Height와line-height의 높이를 설정하여 안에 입력된 문자를 가운데에 놓을 수 있도록 합니다.
FF에서 나타나는 경우: input을 눌렀을 때 입력 커서는 사실 input의 Height와 같이 높지만 문자를 입력하기 시작했을 때 커서는 문자와 같이 높아진다.
chrome 아래 커서는 input의 Height만큼 높고,
IE 아래 커서는 문자의 크기와 일치합니다.
왜 이러는지 줄곧 이해하지 못했는데, 오늘 로브르박물관의 학우들이 토론하는 것을 듣고서야 비로소 원인을 알았다.
초보적인 결론은 다음과 같다.
IE: 이 줄에 문자가 있든 없든 커서 높이는 font-size와 일치합니다.
FF: 이 줄에 문자가 있을 때 커서 높이는 font-size와 일치합니다.이 줄이 문자가 없을 때, 커서 높이는 input의 Height와 일치합니다.
Chrome: 이 줄에 문자가 없을 때 커서 높이가 line-height와 일치합니다.이 줄에 문자가 있을 때, 커서 높이는 input 맨 위에서 텍스트 맨 끝까지 (이 두 가지 상황은 line-height가 설정되어 있을 때), line-height가 없으면 font-size와 일치합니다.
솔루션:
input의height에 작은 높이를 설정한 다음padding으로 채우면 기본적으로 모든 브라우저의 문제를 해결할 수 있습니다

   
   
   
   

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