Lösung für die falsche Ausrichtung des Eingabecursors in Chrome, Firefox und IE

Detaillierte Erklärung zur Fehlplatzierung des Eingabecursors im Browser <br />Ich hatte bei der Arbeit ein Problem und habe versucht, eine Lösung zu finden, und es gab tatsächlich eine! Schreiben Sie es zu Ihrer eigenen Bequemlichkeit und zur Bequemlichkeit anderer auf.

Ich bin im Projekt schon einmal auf ein Problem gestoßen.
Das Eingabefeld wird mit einem Hintergrundbild simuliert und die Höhe auf die gleiche Höhe wie die Zeilenhöhe eingestellt, sodass der darin eingegebene Text zentriert werden kann.
Was in FF passiert, ist, dass wenn Sie auf die Eingabe klicken, der Eingabecursor tatsächlich die gleiche Höhe wie die Eingabe hat, aber wenn Sie anfangen, Text einzugeben, nimmt der Cursor die gleiche Höhe wie der Text an.
In Chrome befindet sich der Cursor auf der Höhe der Eingabehöhe.
Im Internet Explorer hat der Cursor die gleiche Größe wie der Text.
Ich habe nie verstanden, warum das so war, aber heute, nachdem ich einer Diskussion mit meinen Klassenkameraden im Louvre zugehört hatte, verstand ich endlich den Grund.

Die vorläufigen Schlussfolgerungen lauten wie folgt:
IE: Unabhängig davon, ob sich Text in der Zeile befindet, entspricht die Cursorhöhe der Schriftgröße.
FF: Wenn sich Text in der Zeile befindet, entspricht die Cursorhöhe der Schriftgröße. Wenn sich in der Zeile kein Text befindet, entspricht die Cursorhöhe der Eingabehöhe.
Chrome: Wenn sich kein Text in der Zeile befindet, entspricht die Cursorhöhe der Zeilenhöhe. Wenn sich Text in der Zeile befindet, reicht die Cursorhöhe vom oberen Rand der Eingabe bis zum unteren Rand des Textes (in beiden Fällen gilt dies, wenn die Zeilenhöhe festgelegt ist). Wenn keine Zeilenhöhe vorhanden ist, entspricht sie der Schriftgröße.

Lösung:
Das Festlegen einer kleineren Höhe für die Eingabe und die anschließende Verwendung von Polsterung zum Füllen kann das Problem grundsätzlich für alle Browser lösen.

Code kopieren

Der Code lautet wie folgt:

Eingang{
Höhe: 16px;
Polsterung: 4px0px;
Schriftgröße: 12px;
}

<<: Mehrere Elemente in derselben Zeile unter Div in CSS rechtsbündig ausrichten

>>: Prozessdiagramm zum Aufbau des Linux RabbitMQ-Clusters

Tomcat verstümmelte Zeichen in der Konsole in IDEA und wie man die IDEA-Kodierung auf UTF-8 einstellt

Lösung für die falsche Ausrichtung des Eingabecursors in Chrome, Firefox und IE

Tomcat verstümmelte Zeichen in der Konsole in IDEA und wie man die IDEA-Kodierung auf UTF-8 einstellt

Drei Möglichkeiten zur Verwendung von CSS-Inlinestilen, eingebetteten Stilen und externen Referenzstilen

So fügen Sie Spalten in einer MySQL-Datenbank hinzu, löschen und ändern sie

MySQL-Update-Fall Update-Feldwert ist keine feste Operation

Anwendung schöner Stylesheets bei der Erstellung von XHTML+CSS-Webseiten

Kopieren von Node.js-Dateien, Erstellen von Ordnern und andere damit verbundene Vorgänge

Erklärung zur Verwendung von „Ersetzen“ und „Ersetzen in“ in MySQL

Detailliertes Tutorial zum Bereitstellen einer benutzerdefinierten Apollo-Umgebung mit Docker-Compose

Installationsprozess von VMware vCenter 6.7 (grafisches Tutorial)

5 einfache Möglichkeiten, Speicherplatz auf Ubuntu freizugeben

Artikel empfehlen

Implementierung des Imports und Exports von Vue-Element-Admin-Projekten

Verwendung des Linux-Stat-Befehls

Zusammenfassung der MySQL-Anweisungen

Detaillierter Prozess der Bereitstellung von Docker für WSL2 in IDEA

So zeigen Sie den Datenbankinstallationspfad in MySQL an

So importieren Sie eine JS-Konfigurationsdatei auf den Vue-Server

Lösung für den Fehler beim Importieren von MySQL Big Data in Navicat

Der Unterschied zwischen ${param} und #{param} in MySQL

Beispielcode zur Implementierung von Zeitleisten- und Animationseffekten mit JavaScript (Front-End-Komponentenbildung)

CSS setzt die Höhe des Box-Containers (div) immer auf 100 %

Einführung in die Verwendung des MySQL mysqladmin-Clients

CentOS7-Netzwerkkonfiguration unter virtueller VMware-Maschine (Host für drahtlosen Internetzugang)

So verwenden Sie vue3 zum Erstellen einer Materialbibliothek

So zeigen Sie Bildinformationen in Docker an

Spezifische Verwendung des MySQL-Parameters binlog_ignore_db