div中的contentdiveditable绝对div答案

【问题标题】：contentdiveditable absolute div in divdiv中的contentdiveditable绝对div
【发布时间】：2012-09-19 12:40:51
【问题描述】：

我想编辑一个绝对定位的 DIV，它位于可内容编辑的 DIV 中。这适用于 IE、Chrome、Safari 和 Opera，但不幸的是不适用于 Firefox。

这是代码：

<DIV contenteditable="true"
style="border:1px solid #F00; width:220px; height:220px;">
<DIV>
<P>DIV 1, editable</P>
</DIV>
<DIV style="position:absolute; left: 20px; top: 50px;">
<P>DIV 2, not editable in FF !?</P>
</DIV>
</DIV>

我已经在http://jsfiddle.net/Jf54f/4/尝试了不成功

这是一个错误吗？有人有解决方法吗？提前致谢:-)

【问题讨论】：

标签： javascript firefox contenteditable

【解决方案1】：

在可编辑元素上设置position:relative，以便将定位的 div 视为在其中。（很可能是实现中的错误）

http://jsfiddle.net/Jf54f/8/的演示

【讨论】：

完美，行得通。您的解决方案解决了问题。谢谢！

【解决方案2】：

从主 div 中删除 contenteditable="true" 并将其添加到两个内部 div 中效果很好。

在这里查看：http://jsfiddle.net/RASG/Jf54f/10/

【讨论】：

也是一个不错的建议 :-) 谢谢！

【解决方案3】：

你不应该设置 contenteditable="true" 试试 contenteditable。该术语没有任何值，您可以为 chrome 和 IE 添加诸如“纯文本”之类的值，因为它们允许使用 ctrl+b 和 all 进行格式化。

<DIV contenteditable id="">

虽然正如我朋友所说，它适用于所有浏览器。我也尝试过，它可以。

【讨论】：

不符合 w3c 规范。 true/false 是它接受的内容。见w3.org/TR/2008/WD-html5-20080610/editing.html#contenteditable0
但是firefox至少直到12版都不支持div的值，所以我在设置这个属性之前检查了浏览器和版本。
根据 MDN，自 firefox 的 v3.5 起支持它developer.mozilla.org/en-US/docs/HTML/Content_Editable
我不知道...但它也不适用于我的 Firefox。 contenteditable 有效。但是当我尝试添加纯文本只是为了防止 chrome 允许格式化时，它不再在 firefox 中工作。所以我更喜欢直接。
contenteditable 不是布尔属性。但是，省略该值相当于使用空字符串作为值，而对于contenteditable又指定为等价于true，所以<div contenteditable></div>和<div contenteditable="true"></div>具有完全相同的效果（包括在Firefox回到 3.0 版）。