입력 입력 상자에서 커서 크기가 일관되지 않게 표시되는 문제를 해결하는 방법-HTML 튜토리얼-php.cn

집

웹 프론트엔드

HTML 튜토리얼

입력 입력 상자에서 커서 크기가 일관되지 않게 표시되는 문제를 해결하는 방법

php中世界最好的语言

Jan 26, 2018 am 11:00 AM

input 커서 크기

这次给大家带来input输入框中的光标大小显示不一致应该怎么解决，解决input输入框中的光标大小显示不一致的注意事项有哪些，下面就是实战案例，一起来看一下。

input输入框中的光标大小显示不一致
ie7中和chrome的非常明显
先看看问题产生的原因：chrome浏览器对光标高度的设置原则为，当没有内容的时候光标的高度=input的line-height的值，当有内容时，光标从input的顶端到文字的底部。
OK，既然知道了原因，我们就相应才去一些措施。尝试了两种方法去做:。
方法1：将line-height的值设置为跟字体大小一致；如果高度达不到，用padding去撑；
方法2：对chrome不设置line-height，它会自动文字居中，对ie进行hack设置line-height的值以保证文字垂直居中；这里要注意一下，如果在reset的样式文件中有设置line-height等值，请进行line-height的重置，可以用line-height:normal。具体可以看看腾讯好莱坞页面的搜索框。
具体css：

height: 34px; 
font-size: 12px; 
line-height: normal; 
line-height: 34px\9;

로그인 후 복사

相信看了这些案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7547

Cakephp 튜토리얼

1382

Steam의 계정 이름 형식은 무엇입니까?

Win11 활성화 키 영구

NYT 연결 힌트와 답변

Related knowledge

Windows 11에서 모니터 간 Easy T 커서 이동을 켜거나 끕니다. Sep 30, 2023 pm 02:49 PM

듀얼 모니터 설정을 사용할 때 한 모니터에서 다른 모니터로 커서를 원활하게 이동하는 방법에 대한 의문이 생기는 경우가 많습니다. 마우스 커서가 사용자의 제어 없이 한 모니터에서 다른 모니터로 이동할 때 실망스러울 수 있습니다. Windows에서 기본적으로 한 모니터에서 다른 모니터로 쉽게 전환할 수 있다면 좋지 않을까요? 다행히도 Windows 11에는 이를 수행하는 기능이 있으며 이를 수행하는 데 많은 기술 지식이 필요하지 않습니다. 모니터 간 커서 이동을 완화하는 것은 무엇을 합니까? 이 기능은 한 모니터에서 다른 모니터로 마우스를 이동할 때 커서가 이동하는 것을 방지하는 데 도움이 됩니다. 기본적으로 이 옵션은 비활성화되어 있습니다. 켜면 마우스가

VirtualBox에서 디스크 크기를 늘리는 방법 [가이드] Mar 17, 2024 am 10:10 AM

사전 정의된 디스크 크기에 더 많은 데이터를 저장할 공간이 없는 상황이 자주 발생합니까? 이후 단계에서 더 많은 가상 컴퓨터 하드 디스크 공간이 필요한 경우 가상 하드 디스크와 파티션을 확장해야 합니다. 이번 포스팅에서는 VirtualBox에서 디스크 크기를 늘리는 방법에 대해 알아 보겠습니다. VirtualBox에서 디스크 크기 늘리기 항상 문제가 발생할 가능성이 있으므로 이러한 작업을 수행하기 전에 가상 하드 디스크 파일을 백업하는 것이 중요합니다. 항상 백업을 해 두는 것이 좋습니다. 그러나 프로세스는 일반적으로 잘 작동하므로 계속하기 전에 컴퓨터를 종료했는지 확인하십시오. VirtualBox에서 디스크 크기를 늘리는 방법에는 두 가지가 있습니다. CL을 사용하여 GUI를 사용하여 VirtualBox 디스크 크기 확장

vue3에서 입력 구성 요소 및 통합 양식 데이터를 캡슐화하는 방법 May 12, 2023 pm 03:58 PM

준비 vuecreateexample을 사용하여 프로젝트를 생성합니다. 매개변수는 대략 다음과 같습니다. 기본 입력을 사용합니다. 기본 입력은 주로 값과 변경 시 동기화되어야 합니다. App.tsx는 다음과 같습니다: import{ref}from'vue';exportdefault{setup(){//username은 데이터 constusername=ref('Zhang San');//입력 상자가 변경되면 데이터 동기화 constonInput =;반환( )=>({

Windows 7 부팅 시 검은색 화면과 커서 문제를 해결하는 방법 Dec 30, 2023 pm 10:25 PM

Windows 7 시스템은 현재 업데이트가 중단되었으므로 문제가 있는 경우 사용자가 직접 해결할 수 있습니다. 아래 그림과 같이 컴퓨터를 부팅한 후 커서가 검게 변하는 상황이 많이 발생하는데, 문제 해결에 시간을 허비하고 싶지 않다면 시스템을 다시 설치하면 됩니다. Windows 7을 시작할 때 커서가 있는 검은색 화면만 나타나는 경우 어떻게 해야 합니까? 첫 번째 해결 방법: 컴퓨터를 다시 시작한 후 즉시 키보드의 "F8" 버튼을 길게 누르세요. 그런 다음 고급 시스템 메뉴에서 "마지막으로 알려진 양호한 구성"을 선택하십시오. 두 번째 해결 방법: 바로 가기 키 "CTRL+SHIFT+ESC"를 눌러 작업 관리자를 불러올 수 있는지 확인하세요. 그렇다면 마우스 오른쪽 버튼을 클릭하여 프로세스에서 Explorer.exe를 종료한 다음 Explorer.exe를 새로 실행하세요. 노력하다.

laravel 입력 숨겨진 필드를 구현하는 방법 Dec 12, 2022 am 10:07 AM

laravel 입력 숨겨진 필드를 구현하는 방법: 1. 블레이드 템플릿 파일을 찾아 엽니다. 2. 블레이드 템플릿에서 method_field 메서드를 사용하여 숨겨진 필드를 생성합니다. "{{ method_field('DELETE') }} ".

Debian 11 Xfce 터미널의 커서 색상을 설정하는 방법은 무엇입니까? Jan 03, 2024 pm 02:36 PM

Xfce란 무엇입니까? Xfce는 Unix 계열 운영 체제(예: Linux, FreeBSD 및 Solaris)에서 실행되고 경량 데스크탑 환경을 제공하는 무료 소프트웨어입니다. Debian11Xfce 터미널에서 커서 색상을 조정하는 방법은 무엇입니까? 에디터를 이용한 구체적인 작업을 살펴보겠습니다. [편집]-[기본 설정]을 클릭합니다. [색상] 탭으로 전환합니다. Customize [Cursor Color]를 체크하고 오른쪽의 색상 선택 버튼을 클릭합니다. 팔레트를 연 후 설정하려는 커서 색상을 클릭하여 선택하세요.

입력창을 클릭했는데 커서가 없으면 어떻게 해야 하나요? Nov 24, 2023 am 09:44 AM

커서 없이 입력 상자를 클릭하는 방법: 1. 입력 상자의 초점을 확인합니다. 2. 브라우저 캐시를 삭제합니다. 4. JavaScript를 사용합니다. 6. 입력을 확인합니다. 7. JavaScript 코드를 디버그합니다. 8. 페이지의 다른 요소를 확인합니다. 9. 브라우저 호환성을 고려합니다.

Vue 문서의 입력 상자 바인딩 이벤트에 대한 자세한 설명 Jun 21, 2023 am 08:12 AM

Vue.js는 사용하기 쉽고 효율적이며 유연한 경량 JavaScript 프레임워크로 현재 가장 널리 사용되는 프런트엔드 프레임워크 중 하나입니다. Vue.js에서 입력 상자 바인딩 이벤트는 매우 일반적인 요구 사항입니다. 이 기사에서는 Vue 문서의 입력 상자 바인딩 이벤트를 자세히 소개합니다. 1. 기본 개념 Vue.js에서 입력 상자 바인딩 이벤트는 입력 상자의 값을 Vue 인스턴스의 데이터 객체에 바인딩하여 입력과 응답의 양방향 바인딩을 달성하는 것을 의미합니다. Vue.j에서

See all articles