浏览器中文本区域处理不一致

这是我在下面提供的标记中看到的内容。没有一个浏览器将文本区域保留在容器中，这很不方便，但并不是什么大问题。然而，令人烦恼的是，无论我做什么，我都无法摆脱 Chrome 中文本区域的下边距。有什么建议么？

Here is everything in a fiddle: http://jsfiddle.net/radu/RYZUb/ http://jsfiddle.net/radu/RYZUb/

标记：

<div id="wrap">
    <textarea id="txtInput" rows="6" cols="20"></textarea>
    <div id="test"></div>
</div>

CSS:

#wrap
{
   background-color:green;
   height:210px;
   width:440px;
}
#txtInput
{
    height:100px;
    width:100%;
    margin:0px;
    padding:0px;
}
#test
{
    background-color:gray;
    height:100px;
    width:100%;
    margin:0;
    padding:0;
}

要修复“Chrome 中文本区域的下边距”，请添加vertical-align: top to #txtInput.

现场演示 http://jsfiddle.net/jeArS/

现在，您列出的浏览器之间的渲染效果是一致的。

您想要解决方案吗textarea延伸到容器之外？

这修复了 IE8、Firefox、Chrome、Safari、Opera。但在 IE7 中没有帮助：

现场演示 http://jsfiddle.net/jeArS/2/

#txtInput
{
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

在这里，我们使用的是box-sizing财产 https://developer.mozilla.org/en/CSS/box-sizing.

即使在 IE7 中也可能有一种方法可以让它完全正确，但除非你真的关心该浏览器，否则最好就让它突出吧~3px在该浏览器的容器之外。