Mozilla 3.0.8 и Chrome height в em обходной путь ошибки

Question

У меня есть текстовое поле внутри a див:

<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 отрисовывает это нормально:высота самого текстовое поле равна высоте обертывания див.В Mozilla и Chrome обтекающий div отображается на высоте 7 м, но текстовое поле имеет недостаточную высоту примерно в 20-25 пикселей, так что между нижней частью текстового поля и нижней границей div есть зазор.Кто-нибудь знает, как это исправить?

Answer 1

По умолчанию в текстовой области используется другой шрифт, поэтому размер отличается (поскольку ems соотносятся с размером текста).

Добавьте это:

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

Протестировано и работает в FF3