Rumah hujung hadapan web html tutorial input输入框中的光标大小显示不一致应该怎么解决

input输入框中的光标大小显示不一致应该怎么解决

Jan 26, 2018 am 11:00 AM
input kursor saiz

这次给大家带来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;
Salin selepas log masuk

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

相关阅读:

HTML中head头结构应该如何使用

HTML的head头标签有哪些用法

怎样利用iframe让自己的网页可以显示天气

Atas ialah kandungan terperinci input输入框中的光标大小显示不一致应该怎么解决. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Hidupkan atau matikan pergerakan kursor Easy T antara monitor pada Windows 11 Hidupkan atau matikan pergerakan kursor Easy T antara monitor pada Windows 11 Sep 30, 2023 pm 02:49 PM

Selalunya, apabila menggunakan persediaan dwi monitor, persoalan timbul tentang cara menggerakkan kursor dengan lancar dari satu monitor ke monitor yang lain. Ia boleh mengecewakan apabila kursor tetikus anda bergerak dari satu monitor ke monitor yang lain tanpa kawalan anda. Bukankah lebih bagus jika Windows membenarkan anda menukar dari satu monitor ke monitor yang lain secara lalai? Nasib baik, Windows 11 mempunyai ciri yang melakukan perkara itu, dan ia tidak memerlukan banyak pengetahuan teknikal untuk melaksanakannya. Apakah yang dilakukan oleh melonggarkan pergerakan kursor antara monitor? Ciri ini membantu mengelakkan hanyut kursor apabila menggerakkan tetikus dari satu monitor ke monitor yang lain. Secara lalai, pilihan ini dilumpuhkan. Jika anda menghidupkannya, tetikus

Bagaimana untuk meningkatkan saiz cakera dalam VirtualBox [Panduan] Bagaimana untuk meningkatkan saiz cakera dalam VirtualBox [Panduan] Mar 17, 2024 am 10:10 AM

Kami sering menghadapi situasi di mana saiz cakera yang telah ditetapkan tidak mempunyai ruang untuk lebih banyak data? Jika anda memerlukan lebih banyak ruang cakera keras mesin maya pada peringkat seterusnya, anda mesti mengembangkan cakera keras maya dan sekatan. Dalam siaran ini, kita akan melihat bagaimana untuk meningkatkan saiz cakera dalam VirtualBox. Meningkatkan saiz cakera dalam VirtualBox Adalah penting untuk ambil perhatian bahawa anda mungkin ingin menyandarkan fail cakera keras maya anda sebelum melakukan operasi ini, kerana sentiasa ada kemungkinan berlaku masalah. Ia sentiasa menjadi amalan yang baik untuk mempunyai sandaran. Walau bagaimanapun, proses ini biasanya berfungsi dengan baik, cuma pastikan untuk mematikan mesin anda sebelum meneruskan. Terdapat dua cara untuk meningkatkan saiz cakera dalam VirtualBox. Kembangkan saiz cakera VirtualBox menggunakan GUI menggunakan CL

Bagaimana untuk merangkum komponen input dan data borang bersatu dalam vue3 Bagaimana untuk merangkum komponen input dan data borang bersatu dalam vue3 May 12, 2023 pm 03:58 PM

Penyediaan Gunakan vuecreateexample untuk mencipta projek Parameternya adalah seperti berikut: gunakan input asli terutamanya nilai dan perubahan. App.tsx adalah seperti berikut: import{ref}from'vue';exportdefault{setup(){//username is the data constusername=ref('Zhang San');//Apabila kotak input berubah, segerakkan data constonInput =;kembali( )=>({

Bagaimana untuk menyelesaikan masalah skrin hitam dan kursor semasa boot Windows 7 Bagaimana untuk menyelesaikan masalah skrin hitam dan kursor semasa boot Windows 7 Dec 30, 2023 pm 10:25 PM

Sistem Windows 7 kini telah berhenti mengemas kini, jadi jika terdapat masalah, anda hanya boleh menyelesaikannya sendiri. Seperti yang ditunjukkan dalam gambar di bawah, terdapat banyak situasi di mana kursor menjadi hitam selepas but komputer, dan anda perlu menyelesaikan masalah satu demi satu Jika anda tidak mahu menghabiskan masa untuk menyelesaikan masalah, anda boleh memasang semula sistem. Apa yang perlu dilakukan jika hanya terdapat skrin hitam dengan kursor apabila Windows 7 dimulakan Penyelesaian pertama: Mulakan semula komputer, dan segera tekan dan tahan butang "F8" pada papan kekunci selepas dimulakan semula. Kemudian pilih "Konfigurasi Baik Terakhir Diketahui" dalam menu sistem lanjutan. Penyelesaian kedua: tekan kekunci pintasan "CTRL+SHIFT+ESC" untuk melihat sama ada pengurus tugas boleh dibawa ke atas cubalah.

Bagaimana untuk melaksanakan medan tersembunyi input laravel Bagaimana untuk melaksanakan medan tersembunyi input laravel Dec 12, 2022 am 10:07 AM

Cara melaksanakan medan tersembunyi input laravel: 1. Cari dan buka fail templat Blade 2. Gunakan kaedah method_field dalam templat Blade untuk mencipta medan tersembunyi Sintaks penciptaan ialah "{{ method_field('DELETE') }} ".

Bagaimana untuk menetapkan warna kursor terminal Debian 11 Xfce? Bagaimana untuk menetapkan warna kursor terminal Debian 11 Xfce? Jan 03, 2024 pm 02:36 PM

Apa itu Xfce? Xfce ialah perisian percuma yang berjalan pada sistem pengendalian seperti Unix (seperti Linux, FreeBSD dan Solaris) dan menyediakan persekitaran desktop yang ringan. Bagaimana untuk melaraskan warna kursor dalam terminal Debian11Xfce? Mari kita lihat operasi khusus dengan editor. Klik [Edit]-[Keutamaan]. Beralih ke tab [Warna]. Tandai Sesuaikan [Warna Kursor] dan klik butang pemilihan warna di sebelah kanan. Selepas membuka palet, klik untuk memilih warna kursor yang anda mahu tetapkan.

Apa yang perlu dilakukan jika tiada kursor apabila mengklik pada kotak input Apa yang perlu dilakukan jika tiada kursor apabila mengklik pada kotak input Nov 24, 2023 am 09:44 AM

Penyelesaian untuk mengklik kotak input tanpa kursor: 1. Sahkan fokus kotak input 2. Kosongkan cache penyemak imbas 4. Gunakan JavaScript 5. Semak input; sifat kotak; 7. Menyahpepijat kod JavaScript; 8. Semak elemen lain halaman;

Penjelasan terperinci tentang peristiwa mengikat kotak input dalam dokumen Vue Penjelasan terperinci tentang peristiwa mengikat kotak input dalam dokumen Vue Jun 21, 2023 am 08:12 AM

Vue.js ialah rangka kerja JavaScript ringan yang mudah digunakan, cekap dan fleksibel Ia merupakan salah satu rangka kerja bahagian hadapan yang paling popular pada masa ini. Dalam Vue.js, peristiwa mengikat kotak input adalah keperluan yang sangat biasa Artikel ini akan memperkenalkan peristiwa mengikat kotak input dalam dokumen Vue secara terperinci. 1. Konsep asas Dalam Vue.js, peristiwa pengikatan kotak input merujuk kepada pengikatan nilai kotak input kepada objek data bagi contoh Vue, dengan itu mencapai pengikatan dua hala input dan respons. Dalam Vue.j

See all articles