Textfeld-Cursor-Problem in Chrome
Ich verwende folgende CSS in meinem Formularabschnitt.
CSS
%Vor% Es funktioniert in allen Browsern. In Chrome wird der Cursor jedoch in derselben Höhe wie das Eingabe-Tag angezeigt. Ich habe die Lösung gefunden, wenn ich line-height lösche, so wie ich es will. Aber im IE sind die Werte oben auf dem Feld. Ich brauche die Lösung für dieses Problem.
Siehe die meine Geige . [Es ist nicht gut in Chrom]
5 Antworten
Aktuelle Antwort (Oktober 2014)
Nach dem Spielen & Amp; Beobachten Sie, was "Referenz" -Projekte tun, realisierte ich eines: wir machen es falsch.
Kurz gesagt: für eine solide & amp; saubere browserübergreifende Lösung eine darf nicht die Eigenschaft line-height verwenden, um das Element input type="text" höher zu machen, sondern die Eigenschaft padding .
Probleme mit Browsern
Wie in der Frage ausgeführt, interpretieren Browser die Eigenschaft line-height für das Element input type="text" auf verschiedene Arten.
In diesem Fall für Chrome damals in 2012 & amp; auch jetzt noch im Oktober 2014 (Version 37), ist es für die Cursorposition.
Beachten Sie, dass ein entsprechender Fehler im Juni 2010 Ссылка gemeldet wurde, aber dann geschlossen als veraltet (wer weiß warum?): aber die mitgelieferte Live-Bug-Replikation, Ссылка , zeigt immer noch den Chrome-Bug zur Zeit von Schreiben (Oktober 2014 - Chrom 37).
Beachten Sie, dass die Antwort von Valli69 auch die Eigenschaft line-height als Quelle des Problems identifiziert hat. Aber dann verwendet einige ziemlich hacky / dreckig / riskant IE8 & amp; IE9 Fixes (mit /line-height ). Eine verwandte Frage zu diesen Techniken auf Ie8 CSS Hack - beste Methode?
Was ist mit der Verwendung von height oder height Eigenschaft?
Diese Lösung ist einfach & amp; wird sogar von modernen und alten Browsern unterstützt!
1) Lösung in einem optimierten Beispiel
%Vor%Live-Demo auf Ссылка (ps. Test auf IE8 mit dieser URL Ссылка )
Getestet unter Windows-Betriebssystem unter: IE8 +, IE11, Chrome 38 und & amp; Firefox 32.
2) Lösung im Zusammenhang mit der Frage
%Vor%Live-Demo auf Ссылка (ps. Test auf IE8 mit dieser URL Ссылка )
Getestet unter Windows-Betriebssystem unter: IE8 +, IE11, Chrome 38 und & amp; Firefox 32.
3) Weitere Erläuterungen
Diese Idee kam nach einem Blick auf die Foundation : Sie verwendet nur die Eigenschaften padding und line-height : die Die line-height: normal -Eigenschaft wird auf ihren Standardwert brower-provided -Wert zurückgesetzt, also auf input type="text" .
Sehen Sie selbst: indem Sie die height -Elemente auf der Formular-Komponenten-Demoseite der Stiftung http: // foundation einsehen. zurb.com/docs/components/forms.html
Das einzige Problem ist, dass sogar "nur" die Verwendung von padding und height ein Problem für IE8 darstellt. Daher entschied ich mich, die Eigenschaft %code% sogar zu entfernen.
Fazit
Diese Lösung hat offensichtlich den großen Vorteil eines einfachen Codes, der in allen Browsern funktioniert.
Aber es hat auch den Nachteil, dass Sie nicht die volle Kontrolle über die berechnete Gesamthöhe haben : berechnete Höhe Eigenschaft (Schriftgröße + Anzahl der Pixel) + padding-top + padding-bottom + (Rahmenbreite x 2). Die "berechnete Höheneigenschaft" scheint zu variieren Browsern zu Browsern , daher die "beliebig viele Pixel" Benennung.
Es liegt an Ihnen, zu entscheiden, was Ihnen am besten gefällt: einfacher Code oder pixelgenaues Design.
Ressourcen
Ich habe eine Lösung gefunden, die in den neuesten Versionen von Chrome und Firefox sowie IE 8 und 9 funktioniert. Ich habe keine anderen Browser getestet, da ich nichts unter IE 8 unterstützen musste.
%Vor%Sehen Sie sich die Live-Demo auf Ссылка
anBearbeiten: Forgot um hinzuzufügen, dass die erste Eingabe das Problem anzeigt, die zweite zeigt die Lösung.
Im Grunde genommen stellen Sie nur die Höhe und Höhe der Linie auf die gleiche Größe wie die Schriftgröße ein und passen die Eingabe mit Hilfe von Padding an, um sie an die beabsichtigte Gesamthöhe anzupassen.
Hoffentlich hilft es jedem anderen, in dieses nervige Problem hineinzulaufen.
Das Ersetzen von line-height:30px; durch height:30px; in Ihrem jsFiddle hat für mich funktioniert.
Hier sehen Sie eine Beispiel-CSS für Eingaben, die in IE8 ausgerichtet werden und in Chrome keinen riesigen Cursor anzeigen.
%Vor%