Question

我写了一个XHTML 1.0 Transitional页面（使用W3C的验证器验证），其中包含一个table，其中包含textarea：

<table>
    <tr>
        <td>
            <textarea rows="" cols="">
            </textarea>
        </td>
    </tr>
</table>

并且，在外部样式表中，我为table和textarea编写了代码：

table {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
}
textarea {
    width: 100%;
    height: 200px;
    padding: 20px;
    margin: 0px;
}

但是，由于某些原因，textarea的填充会影响其宽度，导致textarea超出页面宽度，从而导致意外溢出。

有没有什么方法可以在不影响宽度的情况下对textarea应用填充？

Answer 1

由于某种原因，textarea的填充影响其宽度

是的，这就是CSS的工作原理。 width指的是元素内容区域的宽度。填充，边框和边距默认单独处理。

参见例如http://quirksmode.org/css/user-interface/boxsizing.html

有没有什么方法可以在不影响TextArea宽度的情况下对textarea应用填充？

CSS box-sizing:border-box规则符合您的要求：

textarea {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    padding: 20px;
}

它告诉浏览器将width视为指元素的内容，填充和边框区域的组合宽度。因此，<textarea>的内容区域的宽度将设置为父元素的100％，减去水平填充的40个像素。

但请注意，IE 7或更早版本不支持border-box。

为什么我的textarea比页面宽？

1 个答案: