1

我写了一个 XHTML 1.0 过渡页面（使用 W3C 的验证器验证），其中包含一个table带有 atextarea的：

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

而且，在外部样式表中，我为tableand编写了代码textarea：

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

但是，由于某种原因，paddingtextarea会影响其宽度，并导致textarea超出页面的宽度，从而导致不必要的溢出。

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

4

1 回答 1

2

出于某种原因，文本区域的填充会影响其宽度

是的，这就是 CSS 的工作原理。width指元素内容区域的宽度。默认情况下，填充、边框和边距是分开处理的。

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

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

CSSbox-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 像素的水平填充。

但是请注意，border-boxIE 7 或更早版本不支持此功能。

于 2013-08-21T15:41:11.270 回答