为什么我的文本区域比页面宽？ [复制]

Question

我编写了一个 XHTML 1.0 过渡页面（使用 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

由于某种原因，文本区域的内边距会影响其宽度

是的，这就是 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。