如果你像这样填充和偏移:

textarea
{
    border:1px solid #999999;
    width:100%;
    padding: 7px 0 7px 7px; 
    position:relative; left:-8px; /* 1px border, too */
}

textarea的右侧与容器的右侧完美对齐，textarea内的文本与容器中的正文完美对齐……和左侧的textarea“突出”一点。它有时更漂亮。

你可以使用box-sizing属性，所有主流兼容标准的浏览器和IE8+都支持它。不过，对于IE7，你仍然需要一个变通方案。点击这里阅读更多。

许多CSS格式问题的答案似乎是“添加另一个<div>!”

所以，在这种精神，你有没有尝试添加一个包装div的边界/填充应用，然后把100%宽度的文本区域里面?比如(未经测试):

文本区域 ｛ 宽度:100%; ｝ .textwrapper ｛ 边框:1px实体#999999; 保证金:5 px 0; 填充:3 px; ｝ <div style="display: block;" id="rulesformitem" class="formitem"> <label for="rules" id="ruleslabel">规则:</label> <div class=" texttwrapper "><textarea cols="2" rows="10" id="rules"/></div> < / div >

填充值也起着一定的作用。使用你发布的风格:

textarea {
  border:1px solid #999999;
  width:100%;
  margin:5px 0;
  padding:3px;
}

宽度已经填满，左、右填充为3px。所以会有溢出。

如果你改变你的风格如下:

textarea
{
  border:1px solid #999999;
  width:98%;
  margin:5px 0;
  padding: 3px 1%;
}

我的样式现在所做的是它的宽度为98%剩下的2%完成100%这就是为什么我给左填充1%右填充1%的原因。这样，溢出的问题就可以解决了

我经常用calc()来解决这个问题。你只需要给textarea一个100%的宽度和一定数量的填充，但你必须减去你给textarea的100%宽度的左右填充总数:

textarea {
    border: 0px;
    width: calc(100% -10px);
    padding: 5px; 
}

或者如果你想给文本区域一个边框:

textarea {
    border: 1px;
    width: calc(100% -12px); /* plus the total left and right border */
    padding: 5px; 
}

对于使用Bootstrap的人，textarea。表单控制也会导致文本区域大小问题。Chrome和Firefox似乎使用不同的高度与以下引导CSS:

textarea.form-conrtol{
    height:auto;
}