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
Zusammenfassung zur Verwendung von MySQL-Isolationsspalten und Präfixindizes
Inhaltsverzeichnis Datenspalten isolieren Präfixi...
So ändern Sie das vergessene Passwort bei der Installation von MySQL auf dem Mac
1. MySQL-Datenbank auf dem Mac installieren 1. My...
Beispiel für CSS3 zum Erzielen eines Div-Ein- und Ausschiebens von unten nach oben
1. Zuerst müssen Sie den Zielselektor von CSS3 ve...
So verwenden Sie Docker, um Containerressourcen zu begrenzen
Problem beim Gucken Angenommen, der IIS-Dienst st...
Gegenfall für die Vue-Implementierung
In diesem Artikelbeispiel wird der spezifische Co...
Lernen Sie die asynchrone Programmierung in Node.js in einem Artikel
Inhaltsverzeichnis Einführung Synchron Asynchron ...
Implementierung eines Bootstrap-Webseiten-Layoutrasters
Inhaltsverzeichnis 1. So funktioniert das Bootstr...
Informationen zur Verwendung des Iconfont-Vektorsymbols von Alibaba in Vue
Es gibt viele Importmethoden im Internet, und die...
So überprüfen Sie, ob die Firewall in Linux ausgeschaltet ist
1. Servicemethode Überprüfen Sie den Firewall-Sta...
So erstellen Sie einen K8S-Cluster und installieren Docker unter Hyper-V
Wenn Sie das Win10-System installiert haben und e...
So lassen Sie eine https-Website den https-Referrer senden und den http-Referrer springen
Dieser Artikel beschreibt einen Vorschlag für ein...
js Canvas realisiert Slider-Verifizierung
In diesem Artikelbeispiel wird der spezifische Co...
Detaillierte Erklärung der MySQL-Dreiwertelogik und NULL
Inhaltsverzeichnis Was ist NULL Zwei Arten von NU...
JavaScript-Einzelthread und asynchrone Details
Inhaltsverzeichnis 1. Aufgabenwarteschlange 2. Um...
Aggregatabfrage- und Union-Abfragevorgänge für MySQL-Datenbanken
Inhaltsverzeichnis 1. Einfügen der abgefragten Er...