在浏览器中处理不一致的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

要修复"Chrome中textarea的底部边距",请添加vertical-align: top到#txtInput.

现场演示

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

你想要一个textarea扩展容器外的解决方案吗？

这修复了IE8,Firefox,Chrome,Safari,Opera.但在IE7中没有帮助:

现场演示

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

在这里,我们正在使用该box-sizing物业.

可能有一种方法可以在IE7中完全正确地使用它,但除非你真的关心那个浏览器,否则最好只能3px在它浏览器的容器外突出它.