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
Artikel empfehlen
Detaillierte Erläuterung der Front-End-Methode zum Übergeben von Parametern zwischen HTML-Seiten
In Projekten kommt es häufig vor, dass eine Liste...
Detaillierte Erläuterung der Wissenspunkte zur Linux-Remoteverwaltung und SSHD-Dienstüberprüfung
1. SSH-Remoteverwaltung SSH-Definition SSH (Secur...
Einfaches Teilen von Mysql-Backup-BAT-Skripten unter Windows
Vorwort Dieser Artikel stellt ein einfaches BAT-S...
Detaillierte Erläuterung des grafischen Tutorials zum Herunterladen, Installieren und Konfigurieren von Win10 DVWA (Lernen von Anfängern)
Das Computersystem wurde neu installiert und die ...
Implementierung der Docker-Container-Statuskonvertierung
Ein Zustandsübergangsdiagramm eines Docker-Contai...
Zusammenfassung einiger kleinerer Probleme mit der MySQL-Autoinkrement-ID
Die folgenden Fragen basieren alle auf der InnoDB...
Linux führt jeden Tag eine automatische und geplante Sicherung der MySQL-Datenbank durch
Überblick Backup ist die Grundlage der Notfallwie...
Ein Beispiel für die Installation von MySQL unter Linux und die Konfiguration des externen Netzwerkzugriffs
Konfigurationsschritte 1. Überprüfen Sie, ob DNS ...
JavaScript zum Erzielen eines Skin-Effekts (Ändern des Hintergrunds)
In diesem Artikel wird der spezifische JavaScript...
Vue implementiert Akkordeoneffekt
In diesem Artikelbeispiel wird der spezifische Co...
Installieren Sie Jenkins mit Docker und lösen Sie das Problem des anfänglichen Plugin-Installationsfehlers
Nach der Installation von Jenkins schlägt der ers...
Eine Methode zum Verbergen von Prozessen unter Linux und die dabei auftretenden Fallstricke
Vorwort 1. Die in diesem Artikel verwendeten Tool...
JavaScript-Countdown zum Schließen von Anzeigen
Verwenden von Javascript zum Implementieren eines...
Reagieren Sie auf die Konstruktionsreihenfolge verschachtelter Komponenten
Inhaltsverzeichnis Auf der offiziellen React-Webs...
Warum wird in Vue nicht empfohlen, einen Index als Schlüsselattributwert zu verwenden?
Inhaltsverzeichnis Vorwort Die Rolle des Schlüsse...