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 Erklärung, wie man IP-Adressen effektiv in MySQL speichert und wie man zwischen String-IP und numerischen Werten konvertiert
In Bezug auf High Performance MySQL Version 3 (Ab...
CentOS 6.5 i386 Installation MySQL 5.7.18 ausführliches Tutorial
Die meisten Leute kompilieren MySQL und legen es ...
JavaScript imitiert den Jingdong-Lupeneffekt
In diesem Artikel wird der spezifische Code für J...
Reines CSS, um eine horizontale Linienanimation unter dem Element (Hintergrundbild) zu erreichen
Effektbild: html: <div class='site_bar'...
MySQL Serie 4 SQL-Syntax
Inhaltsverzeichnis Tutorial-Reihe 1. Einführung u...
Vue-Beispielcode zur einfachen Implementierung von virtuellem Scrollen
Inhaltsverzeichnis Vorwort Rollprinzip erreichen ...
Beispiele für die Erstellung eines MySQL-Datenbankkontos, Autorisierung sowie Datenexport- und -importvorgänge
Dieser Artikel beschreibt Beispiele zum Erstellen...
Detaillierte Erklärung der Abkürzung von State in React
Vorwort Was ist Staat Wir alle sagen, dass React ...
Schritte zum Erstellen eines Dateiservers mit Apache unter Linux
1. Über den Dateiserver Wenn Sie in einem Projekt...
ElementUI implementiert Beispielcode für Dropdown-Optionen und Mehrfachauswahlfelder
Inhaltsverzeichnis Dropdown-Feld zur Mehrfachausw...
Ändern Sie den Stil des HTML-Textkörpers in JS
Inhaltsverzeichnis 1. Ursprüngliche Definition 2....
Zwei Tools zum Teilen des Bildschirms im Linux-Befehlszeilenterminal
Hier sind zwei Terminal-Split-Screen-Tools: scree...
Beispiel zum Ändern des Zeilenabstands einer HTML-Tabelle
Bei der Verwendung von HTML-Tabellen müssen wir m...
Verschiedene Transformationseffekte beim Umschalten von HTML-Webseiten
<META http-equiv="Seite eingeben" CON...
Das CSS3-Diamantpuzzle realisiert die Funktion, nur das Div zu drehen und das Hintergrundbild nicht zu drehen
Nachfragehintergrund Das Projekt wurde mit Vue er...