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，但在右側textarea要么與字段集齊平，要么溢出一點。

有一件事是，如果我從頁面中刪除doctype，一切都會正確顯示。

Answer 1

雖然兩個答案（目前）都提供了有用的相關信息，但實際上都沒有提供解決方案，只需添加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%; 表示父級的寬度加上瀏覽器的默認邊框和填充，如果這些非零，則顯然大於父容器的寬度。

Answer 2

重置textarea ，我沒有在你的重置CSS看到它。

可能它繼承了一些利潤。

Answer 3

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

當IE不處於標准投訴模式時（即，當未提及大多數doctype時），元素的寬度包括它的填充和邊距。 這導致了textarea的溢出。

嘗試刪除任何邊距或填充到您或瀏覽器提供的textarea 。