Heim Web-Frontend HTML-Tutorial So lösen Sie das Problem der inkonsistenten Anzeige der Cursorgröße im Eingabefeld

So lösen Sie das Problem der inkonsistenten Anzeige der Cursorgröße im Eingabefeld

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;
Nach dem Login kopieren

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

相关阅读:

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

HTML的head头标签有哪些用法

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

Das obige ist der detaillierte Inhalt vonSo lösen Sie das Problem der inkonsistenten Anzeige der Cursorgröße im Eingabefeld. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Beste grafische Einstellungen
1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌
Will R.E.P.O. Crossplay haben?
1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Aktivieren oder deaktivieren Sie die Easy T-Cursorbewegung zwischen Monitoren unter Windows 11 Aktivieren oder deaktivieren Sie die Easy T-Cursorbewegung zwischen Monitoren unter Windows 11 Sep 30, 2023 pm 02:49 PM

Bei einem Dual-Monitor-Setup stellt sich oft die Frage, wie man den Cursor nahtlos von einem Monitor zum anderen bewegen kann. Es kann frustrierend sein, wenn sich Ihr Mauszeiger ohne Ihre Kontrolle von einem Monitor zum anderen bewegt. Wäre es nicht großartig, wenn Windows Ihnen standardmäßig den einfachen Wechsel von einem Monitor zum anderen ermöglichen würde? Glücklicherweise verfügt Windows 11 über eine Funktion, die genau das ermöglicht und für deren Ausführung keine großen technischen Kenntnisse erforderlich sind. Was bewirkt die Erleichterung der Cursorbewegung zwischen Monitoren? Diese Funktion hilft, ein Abdriften des Cursors zu verhindern, wenn Sie die Maus von einem Monitor auf einen anderen bewegen. Standardmäßig ist diese Option deaktiviert. Wenn Sie es einschalten, die Maus

So erhöhen Sie die Festplattengröße in VirtualBox [Anleitung] So erhöhen Sie die Festplattengröße in VirtualBox [Anleitung] Mar 17, 2024 am 10:10 AM

Wir stoßen oft auf Situationen, in denen die vordefinierte Festplattengröße keinen Platz für weitere Daten bietet? Wenn Sie zu einem späteren Zeitpunkt mehr Festplattenspeicher der virtuellen Maschine benötigen, müssen Sie die virtuelle Festplatte und die Partitionen erweitern. In diesem Beitrag erfahren Sie, wie Sie die Festplattengröße in VirtualBox erhöhen. Erhöhen der Festplattengröße in VirtualBox Es ist wichtig zu beachten, dass Sie möglicherweise Ihre virtuellen Festplattendateien sichern möchten, bevor Sie diese Vorgänge ausführen, da immer die Möglichkeit besteht, dass etwas schief geht. Es empfiehlt sich immer, Backups zu haben. Der Vorgang funktioniert jedoch normalerweise einwandfrei. Fahren Sie Ihren Computer einfach herunter, bevor Sie fortfahren. Es gibt zwei Möglichkeiten, die Festplattengröße in VirtualBox zu erhöhen. Erweitern Sie die Festplattengröße von VirtualBox über die GUI mit CL

So kapseln Sie Eingabekomponenten und einheitliche Formulardaten in vue3 So kapseln Sie Eingabekomponenten und einheitliche Formulardaten in vue3 May 12, 2023 pm 03:58 PM

Vorbereitung Verwenden Sie vuecreateexample, um ein Projekt zu erstellen. Die Parameter lauten ungefähr wie folgt: Verwenden Sie native Eingaben, bei denen es sich hauptsächlich um Werte und Änderungen handelt. App.tsx lautet wie folgt: import{ref}from'vue';exportdefault{setup(){//username is the data constusername=ref('Zhang San');//Wenn sich das Eingabefeld ändert, synchronisieren Sie die Daten constonInput =;return( )=>({

So lösen Sie das Problem, dass beim Start von Windows 7 nur ein schwarzer Bildschirm und ein schwarzer Cursor angezeigt werden So lösen Sie das Problem, dass beim Start von Windows 7 nur ein schwarzer Bildschirm und ein schwarzer Cursor angezeigt werden Dec 30, 2023 pm 10:25 PM

Das Windows 7-System wird derzeit nicht mehr aktualisiert. Wenn also ein Problem auftritt, können Sie es nur selbst lösen. Wie im Bild unten gezeigt, gibt es viele Situationen, in denen der Cursor nach dem Booten des Computers schwarz wird und Sie die Fehler einzeln beheben müssen. Wenn Sie keine Zeit mit der Fehlerbehebung verbringen möchten, können Sie das System einfach neu installieren. Was tun, wenn beim Start von Windows 7 nur ein schwarzer Bildschirm mit Cursor angezeigt wird? Die erste Lösung: Starten Sie den Computer neu und halten Sie nach dem Neustart sofort die Taste „F8“ auf der Tastatur gedrückt. Wählen Sie dann im erweiterten Systemmenü „Letzte als funktionierend bekannte Konfiguration“ aus. Die zweite Lösung: Drücken Sie die Tastenkombination „STRG+UMSCHALT+ESC“, um zu sehen, ob der Task-Manager aufgerufen werden kann. Wenn ja, klicken Sie mit der rechten Maustaste, um Explorer.exe im Prozess zu beenden, und erstellen Sie dann eine neue Ausführung von Explorer.exe versuchen.

So implementieren Sie ein verstecktes Laravel-Eingabefeld So implementieren Sie ein verstecktes Laravel-Eingabefeld Dec 12, 2022 am 10:07 AM

So implementieren Sie das ausgeblendete Laravel-Eingabefeld: 1. Suchen und öffnen Sie die Blade-Vorlagendatei. 2. Verwenden Sie die method_field-Methode in der Blade-Vorlage, um ein ausgeblendetes Feld zu erstellen. ".

Wie stelle ich die Cursorfarbe des Debian 11 Xfce-Terminals ein? Wie stelle ich die Cursorfarbe des Debian 11 Xfce-Terminals ein? Jan 03, 2024 pm 02:36 PM

Was ist Xfce? Xfce ist eine kostenlose Software, die auf Unix-ähnlichen Betriebssystemen (wie Linux, FreeBSD und Solaris) läuft und eine schlanke Desktop-Umgebung bietet. Wie stelle ich die Cursorfarbe im Debian11Xfce-Terminal ein? Werfen wir einen Blick auf die spezifischen Vorgänge mit dem Editor. Klicken Sie auf [Bearbeiten]-[Einstellungen]. Wechseln Sie zur Registerkarte [Farbe]. Aktivieren Sie „[Cursorfarbe] anpassen“ und klicken Sie rechts auf die Schaltfläche zur Farbauswahl. Nachdem Sie die Palette geöffnet haben, klicken Sie, um die Cursorfarbe auszuwählen, die Sie festlegen möchten.

Was tun, wenn beim Klicken auf das Eingabefeld kein Cursor angezeigt wird? Was tun, wenn beim Klicken auf das Eingabefeld kein Cursor angezeigt wird? Nov 24, 2023 am 09:44 AM

Lösungen zum Anklicken des Eingabefelds ohne Cursor: 1. Bestätigen Sie den Browser-Cache. 3. Aktualisieren Sie den Browser. 6. Überprüfen Sie die Eingabe Box-Eigenschaften; 7. Debuggen von JavaScript-Code; 8. Überprüfen Sie andere Elemente der Seite. 9. Berücksichtigen Sie die Browserkompatibilität.

Detaillierte Erläuterung der Eingabefeld-Bindungsereignisse in Vue-Dokumenten Detaillierte Erläuterung der Eingabefeld-Bindungsereignisse in Vue-Dokumenten Jun 21, 2023 am 08:12 AM

Vue.js ist ein leichtes JavaScript-Framework, das einfach zu verwenden, effizient und flexibel ist. Es ist derzeit eines der beliebtesten Front-End-Frameworks. In Vue.js sind Eingabefeld-Bindungsereignisse eine sehr häufige Anforderung. In diesem Artikel werden die Eingabefeld-Bindungsereignisse im Vue-Dokument ausführlich vorgestellt. 1. Grundkonzepte In Vue.js bezieht sich das Eingabefeld-Bindungsereignis auf die Bindung des Werts des Eingabefelds an das Datenobjekt der Vue-Instanz, wodurch eine bidirektionale Bindung von Eingabe und Antwort erreicht wird. In Vue.j

See all articles