Textarea-Breite stimmt nicht mit dem enthaltenden div überein

Question

Ich frage mich, warum die Textarea sich weigert, mit dem enthaltenen div übereinzustimmen?

<!-- the textarea pokes out--> 
<div style="border:1px solid #ccc; width:300px"> 
    <textarea style="width:100%"></textarea> 
</div> 

Es macht mir Schwierigkeiten Ausrichtung der Elemente

Answer 1

Standardmäßig wird ein <textarea> Element mit einem Rahmen um es gerendert. Das Problem dabei ist, dass Sie beim Festlegen der Eigenschaft width für ein Element nur die Breite des Inhalts, nicht die Gesamtbreite festlegen. Die Gesamtbreite des Elements ist (Breite + Rahmen + Füllung + Rand). Wenn Sie also width auf <textarea> auf 100% setzen, wird die Inhaltsbreite auf 300px gesetzt, aber die Gesamtbreite beträgt 300px zuzüglich der Standardrahmen. was bewirkt, dass es die 300px Breite des <div> überschreitet.

werden Sie könnten diese Grenzen in den <div> mit Polsterung/Margen aufnehmen, aber eine bessere Lösung wäre die box-sizing Eigenschaft auf den <textarea>-border-box gesetzt sein, um die width Eigenschaft zu zwingen, die gesamte Breite des alles zu definieren, bis zu und einschließlich der Grenze des Elements.

Sie benötigen ein wenig Forschung auf diesem Grundstück zu tun, weil es in allen Browsern anders deklariert wird (zum Beispiel -moz-box-sizing, -ms-box-sizing, -webkit-box-sizing, etc.). Here is the QuirksMode page on box-sizing für Sie durchzusehen.

Die box-sizing Korrektur funktioniert für Firefox, aber ich habe es nicht in anderen Browsern getestet. Es ist möglich, dass einige von ihnen, insbesondere im Quirk/Legacy-Modus, auch einen Rand auf das Element anwenden können. Wenn dies der Fall ist, müssen Sie nur die Ränder mit CSS entfernen (AFAIK, es gibt keine weit verbreitete Option für box-sizing, die sich auf Ränder erstreckt - nur für Inhalt, Auffüllung und Rahmen).

ich mit diesem Update spezifisch würde vorschlagen, und nur mit der linken/rechten Rand (dh margin-left: 0; margin-right: 0;) Entfernen anstatt Margen vollständig (dh margin: 0;) Entfernen jeglicher oberen/unteren Ränder zu erhalten, wenn sie (existieren und wenn Sie möchten, um sie zu behalten). Ich weiß, dass Firefox einen 1px Rand an den oberen/unteren Rand anwendet, und andere Browser könnten genauso gut funktionieren.

Answer 2

um sicherzustellen, habe ich versucht, dass in Firefox, Chrome und IE, und sie alle es richtig zeigen. Ich vermute, dass DIV in einem anderen Container ist und das verursacht das Problem.

Bitte fügen Sie einen Teil Ihres Codes hinzu.

Answer 3

Der Textbereich kann mit einem Rand versehen werden. Versuchen Sie folgendes:

<div style="border:1px solid #ccc; width:300px"> 
    <textarea style="width:100%; margin: 0;"></textarea> 
</div> 

Answer 4

<div style="border:1px solid #ccc; width:300px"> 
    <textarea style="width:100%"></textarea> 
</div> 

Getestet Arbeiten an Firefox 3.6.10, Internet Explorer 8 und Google Chrome.

Aber vielleicht, statt sie in einem DIV umschließt, können Sie auch versuchen, diese:

<textarea style="border:1px solid #ccc; width:300px"></textarea> 

das etwa das gleiche Aussehen wie der Original-Code.