Firefox vs Chrome contenteditable padding

В этом примере: http://jsfiddle.net/kyhvW/

#test1 {
  position:absolute;
  font-size:10px;
  font-family:arial;
  background:black;
  padding:2px;
  border-radius:2px;
  color:white;
}

<span id="test1" contentEditable="true"></span>

В Chrome у меня есть 15-кратный высокий фон, где мой шрифт высотой 7 пикселей высотой с отступом 4px сверху и снизу. Вот как я хочу, чтобы он отображался в других браузерах (хотя странно, что это не шрифт 10px с дополнением 2px).

В Firefox я смотрю на 4px высокий фон, прежде чем вводится какой-либо текст. После того, как я поместил в него текст, ящик расширяется до 18px с заполнением 6px внизу, дополнением 5px сверху и шрифтом 7px. Как я могу сделать эту работу с FF, не испортив ее для Chrome?

Чтобы исправить 4px высокую проблему фона в FF, я попытался использовать min-height:15px. Вместо того, чтобы сделать коробку равномерно на 15 пикселей по обоим обозревателям, она решает сделать коробку 19px высокой в FF и Chrome, только в хром это шрифт 7px с дополнением 4px сверху и 8px padding внизу, где в FF это шрифт 7px с 5px padding сверху и 7px padding внизу. (Используя min-height:11px получает мне поле 15px в FF до ввода текста, затем 18px после, а в Chrome остается 15px до и после.)