Textarea en 100% Width Overflows Parent Container

Question

Tengo un problema con un área de texto (y posiblemente cualquier elemento de entrada) que se muestra demasiado ancho si el ancho está establecido en 100%. Aquí está mi CSS.

Primero, estoy restableciendo todos los estilos.

html, body, div, span, applet, object, iframe, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
a, abbr, acronym, address, big, cite, code, 
del, dfn, em, img, ins, kbd, q, s, samp, 
small, strike, strong, sub, sup, tt, var, 
b, u, i, center, 
dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td, 
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary, 
time, mark, audio, video { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    font-size: 100%; 
    font: inherit; 
    vertical-align: baseline; 
} 
/* HTML5 display-role reset for older browsers */ 
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section { 
    display: block; 
} 
body { 
    line-height: 1; 
} 
ol, ul { 
    list-style: none; 
} 
blockquote, q { 
    quotes: none; 
} 
blockquote:before, blockquote:after, 
q:before, q:after { 
    content: ''; 
    content: none; 
} 
table { 
    border-collapse: collapse; 
    border-spacing: 0; 
} 

Luego aplicando el estilo a mi formulario.

form fieldset { 
    border: none; 
    border: 1px solid #ff0000; 
    padding: 5px; 
} 
form fieldset legend { 
    font-size: 20px; 
    font-weight: bold; 
} 
form textarea { 
    width: 100%; 
    height: 500px; 
} 

Y finalmente mi HTML.

<form method="post"> 
    <fieldset> 
     <label for="area">Content</label> 
     <textarea id="area" name="area"></textarea> 
    </fieldset> 
</form> 

En Chrome y Firefox (no hemos probado otros aún), el área de texto es propiamente 5px acolchada de la izquierda, pero a la derecha del área de texto es o bien a ras con el conjunto de campos, o desbordamiento sólo un poco.

Una cosa de interés, es que todo se muestra correctamente si elimino el doctype de la página.

Answer 1

Restablezca también el textarea, no lo veo en su restablecimiento de CSS.

Probablemente esté heredando algún margen.

Answer 2

razón principal: http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug

Cuando IE no está en modo de queja estándar (es decir, cuando la mayoría de tipo de documento no se menciona), el ancho de un elemento incluye que es relleno y el margen. Esto conduce al desbordamiento del textarea.

Intentando eliminar cualquier margen o relleno al textarea proporcionado por usted o por el navegador.

Answer 3

Mientras que las dos respuestas (en la actualidad) proporcionar información relevante útil, ni de hecho proporcionar una solución, que es simplemente añadir box-sizing: border-box; a la textarea, es decir

form textarea { 
    width: 100%; 
    box-sizing: border-box; 
    height: 500px; 
} 

box-sizing: border-box; está soportado en todos los navegadores modernos, como Internet Explorer 8 (pero no IE7), y significa que el ancho del elemento incluyendo el borde y el relleno se usa al calcular el diseño.

El valor predeterminado es normalmente content-box que utiliza únicamente el ancho interno del elemento. La mayoría de los navegadores proporcionan sus propios estilos predeterminados border y padding para textarea, pero no siempre box-sizing, por lo que el resultado puede ser width: 100%; significa el ancho principal más el borde y relleno predeterminados del navegador, que, si no son cero, es obviamente más que el ancho del contenedor principal.