使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 */ 
} 

請幫助我，使這個代碼跨瀏覽器..

編輯：因爲我需要2px我不能使用百分比TextBox字段和父div之間的差距。

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