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，它仅使用元素的内部宽度。大多数浏览器为border提供了自己的默认padding和textarea样式，但并不总是box-sizing，因此结果可能是width: 100%;表示父亲的宽度加上浏览器的默认边框和填充，如果它们非零，则显然大于父容器的宽度。

Answer 2

重置textarea，我在重置CSS时看不到它。

可能它继承了一些余地。

Answer 3

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

当IE未处于标准投诉模式时（即，当未提及大多数doctype时），元素的宽度包括它的填充和边距。这会导致textarea溢出。

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

Textarea 100％宽度溢出父容器

3 个答案: