当CSS中存在填充时，如何使TextArea的宽度为100％而不会溢出？

Question

我正在渲染以下CSS和HTML代码段。

textarea

{

  border:1px solid #999999;

  width:100%;

  margin:5px 0;

  padding:3px;

}


<div style="display: block;" id="rulesformitem" class="formitem">

  <label for="rules" id="ruleslabel">Rules:</label>

  <textarea cols="2" rows="10" id="rules"/>

</div>

问题是文本区域最终比父区域宽8像素（边框2像素+填充6像素）。有没有办法继续使用边框和填充，但是将的总大小限制textarea为父级的宽度？

Answer 1

为什么不忘了这些技巧，而只使用CSS？

我经常使用的一种：

.boxsizingBorder {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}