Lösung für die inkonsistente Anzeige der Cursorgröße in der Eingabeeingabebox_HTML/Xhtml_Webseitenproduktion

Die Cursorgröße im Eingabefeld wird inkonsistent angezeigt

Das ist in IE7 und Chrome sehr offensichtlich

Sehen wir uns zunächst die Ursache des Problems an: Der Chrome-Browser stellt die Cursorhöhe wie folgt ein : wenn kein Inhalt vorhanden ist. Wenn die Höhe des Cursors = der Wert der Zeilenhöhe der Eingabe ist und Inhalt vorhanden ist, bewegt sich der Cursor vom oberen Rand der Eingabe zum unteren Rand des Textes.

OK, da wir nun den Grund kennen, werden wir entsprechende Maßnahmen ergreifen. Habe es auf zwei Arten versucht:.

Methode 1: Stellen Sie den Zeilenhöhenwert so ein, dass er mit der Schriftgröße übereinstimmt. Wenn die Höhe nicht erreicht werden kann, verwenden Sie die Auffüllung, um ihn zu unterstützen.

Methode 2: Legen Sie keine Zeilenhöhe fest. height für Chrome. Der IE-Hack zentriert den Wert automatisch, um sicherzustellen, dass der Text vertikal zentriert ist Datei, bitte setzen Sie line-height zurück, Sie können line-height:normal verwenden. Weitere Informationen finden Sie im Suchfeld auf der Hollywood-Seite von Tencent.

Spezifisches CSS:

Code kopieren

Der Code lautet wie folgt:

Höhe: 34px;
Schriftgröße: 12px;
Zeilenhöhe: 34px9;