web-dev-qa-db-de.com

Die Feldgröße für Eingaben in Firefox verbirgt Text

Ich habe ein Problem mit Firefox beim Anwenden von -moz-box-sizing : border-box; auf Eingaben. Es scheint, als ob der von mir eingegebene Text irgendwo versteckt oder überfüllt ist oder so.

Sie können das Problem hier sehen: Test (Ändern Sie die Größe Ihres Fensters auf eine Größe von weniger als 980px, da es sich um eine mobile Version handelt);

Was könnte das Problem dort sein? Weil ich alles versucht habe, was ich finden konnte, und das einzige, was funktioniert hat, ist das Entfernen der Eigenschaft -moz-box-sizing : border-box; (:

cssfirefox
20
Roland

Sie sollten die Höhe auf 100% einstellen. Ich habe das folgende CSS für Ihre Eingabefelder ausprobiert und es hat geholfen:

input[type="text"] {
    -moz-box-sizing: border-box;
    font-size: 16px;
    height: 100%;
    padding: 20px;
    width: 100%;
}

==> Der Grund ist, dass Ihr Abstand von 20px zu groß ist. Versuchen Sie zunächst, die Polsterung zu entfernen. Sie werden sehen, dass der Text des Eingabefeldes plötzlich sichtbar wird ;-). Nachdem ich das gesehen habe, habe ich die Höhe auf 100% gesetzt. Jetzt können Sie die Polsterung auf z. 10px und alles sieht gut aus.

45
Manuel Brnjic

Ich hatte dieses Problem aber zunächst in Safari 6+. Einige Texteingaben respektierten das Auffüllen von oben/unten, andere nicht und wurden kürzer. Durch die Verwendung von height: 100% für alle, wie hier vorgeschlagen, wurden sie alle konsistent und schienen die Polsterung oben/unten zu respektieren. Es wurden jedoch einige zusätzliche Pixel in der Höhe hinzugefügt.

Am Ende habe ich box-sizing: content-box für alle gemacht, was dazu geführt hat, dass sie das Auffüllen von oben/unten respektieren, aber ohne die zusätzlichen Pixel in der Höhe.

Musste dies allerdings mit einer width: calc(100% - <padding L+R>) verfolgen, was ein Nachteil ist.

1
atwixtor

Ich habe dieses Problem anders gelöst, indem ich ein benutzerdefiniertes Auffüllen für die Eingabetext-Tags hinzugefügt habe

input[type="text"] {
  padding: 6px 12px 12px 6px;
}

input[type="email"] {
  padding: 6px 12px 12px 6px;
}

input[type="password"] {
  padding: 6px 12px 12px 6px;
}
0
seza443