Mozilla 3.0.8和Chrome高度错误的解决方法

Question

我在 div 中有 textarea ：

<div id="textareawrapper">
  <textarea id="chat"></textarea>
</div>

...和 CSS ：

#textareawrapper {
    border 1px dashed pink;
    margin:0;padding:0;
    position: absolute;bottom: 0em;left:7.5em;right:7.5em;height: 7em;
}
#textareawrapper textarea {margin:0;padding:0;width: 100%;height:7em;}

IE 7渲染得很好： textarea 的高度等于包裹 div 的高度。在Mozilla和Chrome中，包装div渲染为7em高，但textarea大约20-25px不够高，因此textarea的底部和div的底部边界之间存在间隙。有没有人知道如何解决这个问题？

Answer 1

默认情况下，textarea使用不同的字体，因此大小不同（因为ems与文本大小有关）。

添加：

#textareawrapper textarea { font-size: 100%; font-family: inherit; }

经测试＆amp;在FF3工作