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

Question

这是我看到的下面提供的标记。没有一个浏览器将文本区域保留在容器中，这很不方便，但问题不大。然而，令人讨厌的是，无论我做什么，我都无法摆脱 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

要修复“Chrome 中文本区域的下边距”，请将 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;
}