Mozilla 3.0.8 and Chrome height in em bug workaround

问题

I've got a textarea inside a div:

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

...and 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 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?

回答1:

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

Add this:

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

Tested & working in FF3

来源：https://stackoverflow.com/questions/789479/mozilla-3-0-8-and-chrome-height-in-em-bug-workaround