Mozilla 3.0.8和Chrome的高度在em的解决方法 [英] Mozilla 3.0.8 and Chrome height in em bug workaround

问题描述

我在 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的底部边框之间有一个空隙。有没有人知道如何解决这个问题？

IE 7 renders it fine: the height of the textarea is equal to the height of the wrapping div. In Mozilla and Chrome the the wrapping div is rendered 7em high, but the textarea is some 20-25px not hight enough, so that there is a gap between the bottom of the textarea and the bottom border of the div. Does any one know how to fix this?

推荐答案

textarea默认使用不同的字体，

The textarea is using a different font by default, so the size is different (as ems relate to the text size).

添加：

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

测试&在FF3中工作

Tested & working in FF3

这篇关于Mozilla 3.0.8和Chrome的高度在em的解决方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！