在此示例中：http://jsfidle.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中，我得到一个15px高的背景，我的字体是7px高，顶部和底部有4px的填充。这就是我希望它在其他浏览器上显示的方式（不过，奇怪的是它不是一个10px的字体和2px的填充。）

在Firefox中，在输入任何文本之前，我会看到一个4px高的背景。一旦我将文本放入其中，框将扩展到18px，底部为6px，顶部为5px，字体为7px。我怎样才能使这个工作与FF而不搞乱它为Chrome？

为了纠正FF中4px高背景的问题，我尝试使用min-height:15px。在FF和Chrome中，它不是将框设置为15px，而是将框设置为19px高，只是在Chrome中，它是一个7px字体，顶部有4px填充，底部有8px填充，而在FF中，它是一个7px字体，顶部有5px填充，底部有7px填充。（使用min-height:11px在FF中输入文本之前得到一个15px的框，然后是18px，而在Chrome中则前后保持15px。）