Question

在此示例中：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像素高的背景，我的字体高7px，顶部和底部有4px填充。这就是我希望它在其他浏览器上显示的方式（但是，奇怪的是它不是带有2px填充的10px字体。）

在Firefox中，在输入任何文本之前，我正在查看高4px的背景。一旦我将文本放入其中，该框扩展为18px，底部为6px填充，顶部为5px填充，以及7px字体。如何在不破坏Chrome的情况下使用FF进行此操作？

要更正FF中的4px高背景问题，我尝试使用min-height:15px。它不是在两个浏览器上均匀地制作15px的盒子，而是决定在FF和Chrome中制作19px高的盒子，仅在chrome中它是一个7px字体，顶部有4px填充，底部有8px填充，在FF中它是一个7px字体顶部5px填充，底部7px填充。（在我输入文字之前，使用min-height:11px在FF中获得一个15像素的盒子，然后在18px之后获得，而在Chrome之前和之后保持15px。）

Answer 1

啊哈，我找到了一个使用line-height和min-height组合的可行解决方案。这给了我一个15px的盒子，在FF和铬的顶部/底部有4px填充。 http://jsfiddle.net/4wemJ/

Firefox vs Chrome contenteditable padding

1 个答案: