Heim >Web-Frontend >HTML-Tutorial >Lösung für die inkonsistente Anzeige der Cursorgröße in der Eingabeeingabebox_HTML/Xhtml_Webseitenproduktion

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

WBOY
WBOYOriginal
2016-05-16 16:36:371494Durchsuche

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;

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn