Mozilla 3.0.8 y Chrome en altura em fallo solución

Question

Tengo un área de texto en un div

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

... y 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 hace que sea muy bien: la altura de la área de texto es igual a la altura de la envoltura div . En Mozilla y Chrome el div del envoltorio se hace 7em alta, pero el área de texto es que algunos no 20-25px suficiente altura, por lo que existe una brecha entre la parte inferior del área de texto y el borde inferior de la div. ¿Alguien sabe cómo solucionar este problema?

Answer 1

El área de texto utiliza una fuente diferente de forma predeterminada, por lo que el tamaño es diferente (como ems se relacionan con el tamaño del texto).

añadir lo siguiente:

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

Probado y trabajando en FF3