[解決済み] CSSでパディングがある場合に、TextAreaの幅をはみ出さずに100％にするにはどうしたらよいですか？

質問

以下の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>

問題は、テキストエリアが親より8px（ボーダー2px＋パディング6px）広くなってしまうことです。 ボーダーとパディングを使用し続け、かつ textarea を親の幅に合わせるのでしょうか？

解決方法は？

ハックするのを忘れて、CSSでやってみてはどうでしょう？

私がよく使うものを一つ。

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

対応ブラウザを見る こちら .