2012-10-03 13 views
9

Wenn ich ein Padding zu einem Textfeld festlegen, funktioniert es in Ordnung auf den ersten Blick. Aber wenn ich Inhalt eintippe, der über die Textarea-Höhe hinausgeht (wenn du anfängst, den Scroller zu sehen), hört der padding-bottom auf zu existieren. Gibt es eine Möglichkeit, das zu beheben? Es scheint ein Standardverhalten zu sein. Sie können ein sehr einfaches Beispiel hier sehen: http://jsfiddle.net/corinne/LKkky/ PS. Der verwendete Browser ist Chrome. PS2. Gerade mit Firefox versucht und tatsächlich bleibt die Polsterung.Padding-Unterseite für Textarea wird nicht berücksichtigt

+3

Ja und Sie können es nicht vermeiden. Setzen Sie das Textfeld in ein div und stylen Sie div, entfernen Sie die Ränder aus textarea und et voila. –

+1

Das Padding ist immer noch da, es fällt nur während der Eingabe unter den unteren Rand des scrollbaren Bereichs. Es wäre das gleiche, wenn Sie ein scrollendes div oder sogar den Körper hätten, wenn die Seite Scrollbalken hat. –

+1

Ich benutze Firefox 8.0 und ich kann nicht sehen, wo das Problem ist. Egal wie viel Text ich eintippe, die Auffüllung ist immer da. Vielleicht ist es spezifisch für den Browser, den Sie verwenden. – Shadowxvii

Antwort

3

Chrome, Safari und Internet Explorer rendern die textarea paddings anders als Firefox und Opera. Nun, welche von ihnen rendern die Textareas falsch? Das hängt davon ab, was Sie erreichen wollen, weil in Wahrheit keiner von ihnen es falsch macht, sie fügen alle Polsterung hinzu, es kommt nur darauf an, wie sie die Spezifikation interpretierten.

Keine CSS-Eigenschaft wird dieses 'Problem' beheben, also können Sie dieses 'Problem' nur umgehen, indem Sie ein container-Element zum Textarea hinzufügen und stattdessen eine Füllung geben.

1

Eigentlich existiert es noch; Sie müssen nur nach unten scrollen, um die zusätzlichen 20px der Auffüllung zu sehen, wenn der Textboxinhalt ausgefüllt ist. Kann ich vorschlagen Überlauf: versteckt.

+0

Ja, du hast recht, eigentlich. Überlauf: versteckt versteckt nur die Bildlaufleiste. Und tatsächlich, es ändert das Problem nicht, ich muss immer noch nach unten schauen, um die Auffüllung zu sehen. – Corinne

+0

Ich habe in jfiddle chrome getestet und wenn der Inhalt auf die Füllhöhe und auf die nächste Zeile gefüllt wurde, fiel der Fokus nach unten, Padding auf der Unterseite, aber Abschneiden der Spitze (nicht großartig ohne eine Bildlaufleiste). Ich glaube, Benutzer mdk hat die beste Lösung für Sie. Vielen Dank für das Teilen dieser Frage. –

+0

'overflow-x: hidden' funktioniert für mich und vertikale scrollbar ist noch verfügbar – andreymal

1

Sie können den Tag font-size: 0; dem form Tag zuweisen, da das Problem darin besteht, dass innerhalb eines solchen Tags irgendwo eine neue Zeile vorhanden ist, die Sie vermeiden müssen.

Danach sollten Sie der Komponente mit dem Inhalt die richtige Schriftgröße zuweisen, im einfachsten Fall dem Textbereich.

Verwandte Themen