Textarea在100％宽度溢出父容器

Question

如果宽度设置为100％，我遇到了显示太宽的textarea（可能是任何输入元素）的问题。这是我的CSS。

首先，我重置所有样式。

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; 
} 

然后将样式应用到我的表单。

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; 
} 

最后我的HTML。

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

在Chrome和Firefox（没有测试过别人还），textarea的是正确的左侧填充为5px，但右边的文本区域或者是与字段集，或者溢出只是有点齐平。

感兴趣的一件事是，如果我从页面中删除文档类型，所有东西都能正确显示。

Answer 1

重置也textarea，我没有看到它在您的重置CSS。

可能是继承了一些利润。

Answer 2

的主要原因是：http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug

当IE是不能在标准模式的投诉（即，当大多DOCTYPE没有提及），一个元件的宽度包括它的空白和边距。这导致textarea溢出。

尝试删除由您或浏览器提供的textarea的任何边距或填充。

Answer 3

虽然两个答案（目前）提供有用的相关信息，既没有实际提供的解决方案，这是简单地添加box-sizing: border-box;到textarea，即

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

box-sizing: border-box;在所有现代浏览器包括IE8支持（但不是IE7），并且意味着在计算布局时使用元素的宽度（包括边框和填充）。

缺省值通常为content-box，仅使用元素的内部宽度。大多数浏览器为textarea提供它们自己的默认border和padding样式，但并不总是box-sizing，所以结果可能是width: 100%;意味着父宽度加上浏览器的默认边框和填充，如果它们不为零，则显然大于父容器的宽度。