在FireFox中contentEditable光标的位置/样式

Question

我在FireFox 3中使用contentEditable时遇到问题。在单击鼠标后，光标将出现在div上方或仅部分出现在div中（直到我开始输入时，它才能正常工作）。关于如何阻止这种情况的任何想法？

HTML：

<html>
  <head> <title>测试页</ title> </ head>
  <身体>
    <div id =“ editor” style =“ position：absolute; left：157px; top：230px; width：120px; height：30px”>
      <div id =“ input” style =“ width：100％; height：100％; border：1px纯黑色；轮廓：无” contentEditable =” true“> </ div>
    </ div>
  </ body>
</ html>

Answer 1

我在Firefox 37.0.2中遇到了完全相同的问题。在contenteditable的：before伪元素中放置零宽度的空格可解决此问题：

.contenteditable:empty:before {
  content: "\200B";
  display: inline;
}

该修复程序可在包括IE11在内的所有现代浏览器中使用，该浏览器也存在与Firefox十分相似的插入位置问题。

Answer 2

我等待并使用了只能在 Firefox 4 及更高版本中编辑的内容。我提交了这个错误以及 Mozilla 团队已为 FF 4 修复的其他一些错误。