在浏览器中处理不一致的textarea

Question

以下是我在下面提供的标记中看到的内容。没有一个浏览器将textareas保留在容器中这是不方便但不是那么大的问题。然而，令人讨厌的是，无论我做什么，我都无法摆脱Chrome中textarea的底部边缘。有什么建议吗？

以下是小提琴中的所有内容：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;
}

Answer 1

要修复＆＃34; Chrome＆＃34;中textarea的下边距，请将vertical-align: top添加到#txtInput。

Live Demo

现在，您在列出的浏览器之间进行了一致的渲染。

您是否需要textarea扩展到容器外的解决方案？

---

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

Live Demo

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

在此，我们正在使用box-sizing property。

即使在IE7中也可能有一种完全正确的方法，但除非你真的关心那个浏览器，否则最好只能在它外面突出〜3px。该浏览器中的容器。

Answer 2

这可以通过将显示设置为textarea

的块来解决

#txtInput
{
  height:100px;
  width:438px;
  margin:0px;
  padding:0px;
  display:block;
}

textarea的宽度不包括1px边框，因此将宽度减少2px可以防止textarea溢出。

Answer 3

在Chrome 9.0.597.107中，-5px的下限为我工作。

#txtInput
{
    height:100px;
    width:100%;
    margin:0 0 -5px;
    padding:0px;
}