Ich habe ein Problem mit einem Textfeld (und möglicherweise einem Eingabeelement), das zu breit angezeigt wird, wenn die Breite auf 100% eingestellt ist. Hier ist mein CSS.
Zuerst setze ich alle Stile zurück.
%Vor%Dann Styling auf mein Formular anwenden.
%Vor%Und schließlich mein HTML.
%Vor%In Chrome und Firefox (noch nicht getestet), ist das Textfeld auf der linken Seite richtig gepolstert, aber auf der rechten Seite ist das Textfeld entweder bündig mit dem Feld oder überfüllt nur ein bisschen.
Interessant ist, dass alles korrekt angezeigt wird, wenn ich den Doctype von der Seite entferne.
Während beide Antworten (derzeit) nützliche relevante Informationen liefern, stellen beide tatsächlich keine Lösung bereit, die einfach box-sizing: border-box; zum textarea hinzufügt, d. h.
box-sizing: border-box; wird in allen modernen Browsern einschließlich IE8 (aber nicht IE7) unterstützt und bedeutet, dass die Elementbreite einschließlich Rahmen und Abstand bei der Berechnung des Layouts verwendet wird.
Der Standardwert ist normalerweise content-box , der nur die innere Breite des Elements verwendet. Die meisten Browser stellen ihre eigenen border - und padding -Stile für textarea , aber nicht immer box-sizing zur Verfügung. Das Ergebnis könnte sein, dass width: 100%; die Breite der Eltern plus den Standard-Rahmen und -Polster des Browsers angibt, die if diese sind nicht Null, ist offensichtlich mehr als die Breite des übergeordneten Containers.
Hauptgrund: Ссылка
Wenn IE nicht im Standard-Reklamationsmodus ist (dh wenn der Doctype meistens NICHT erwähnt wird), enthält die Breite eines Elements dessen Padding und Rand. Dies führt zum Überlauf von textarea .
Probieren Sie, alle Ränder oder Abstände zu dem von Ihnen oder dem Browser bereitgestellten textarea zu entfernen.