입력입력창의 커서 크기 표시 불일치 문제 해결_HTML/Xhtml_웹페이지 제작

입력 입력창에 커서 크기가 일관되지 않게 표시됩니다

IE7과 Chrome에서는 매우 명확합니다

먼저 문제의 원인을 살펴보겠습니다. 크롬 브라우저에서는 커서 높이를 다음과 같이 설정합니다. : 내용이 없는 경우 커서의 높이 = 입력의 line-height 값일 때, 내용이 있는 경우 커서는 입력된 내용의 상단에서 텍스트의 하단으로 이동합니다.

이제 원인을 알았으니 그에 따른 조치를 취하겠습니다. 이를 수행하는 두 가지 방법을 시도했습니다.

방법 1: 글꼴 크기와 일치하도록 line-height 값을 설정합니다. 높이에 도달할 수 없으면 패딩을 사용하여 이를 지원합니다.

방법 2: line-을 설정하지 마세요. chrome의 경우 자동으로 텍스트를 중앙에 배치합니다. IE를 해킹하여 텍스트가 수직으로 중앙에 오도록 설정합니다. 재설정 스타일에 line-height와 같은 값이 설정되어 있는 경우 주의하세요. 파일에서 line-height를 재설정하세요. line-height:normal을 사용할 수 있습니다. 자세한 내용은 Tencent Hollywood 페이지의 검색창을 참조하세요.

특정 CSS:

코드 복사

코드는 다음과 같습니다.

높이: 34px;
글꼴 크기: 12px;
줄 높이: 일반
줄 높이: 34px9;