使 TextBox 字段覆盖父 div，应该是跨浏览器

Question

在下面的代码中，TextBox 字段应该适合div#chat-message 的宽度和高度（有2px 的间隙），这在 Chrome 中可以被视为完美，但在 IE8 或 Mozilla 中则不然。在 Mozilla 中，TextBox 字段也可以调整大小，这是我不希望发生的。

HTML

<!-- Nested in Div's -->
 <div id="chat-message-outline">
    <div id="chat-message">
        <asp:TextBox ID="txtmsg" BackColor="Transparent" runat="server"
                  Wrap="true" BorderStyle="None" TextMode="MultiLine" />
    </div>
 </div>

CSS

#chat-message-outline
{
  height: 20%;
  width: 100%;
  background-color: #D1D1D1;
  position: relative;
}

#chat-message, #txtmsg
{
  padding: 0;
  top: 2px;
  bottom: 2px;
  right: 2px;
  left: 2px;
  background-color: white;
  position: absolute;
  resize: none; /* CSS3 property */
}

请协助我制作此代码跨浏览器..

编辑：我不能使用百分比，因为我需要在 TextBox 字段和父 div 之间有2px 间隙。

PS：我问过这个question 之前我得到的答案不是跨浏览器（稍后实现）

Answer 1

如何使用 position:absolute 将 textarea 适合另一个元素的解决方案：http://snook.ca/archives/html_and_css/absolute-position-textarea

小提琴：http://jsfiddle.net/bQQYA/ 编辑：摆弄 2px 间距：http://jsfiddle.net/3EPSL/

另外，我发现了类似的问题：100% TextArea in FireFox using absolute position