CSS Display None 属性不适用于 Internet Explorer 上的 ContentEdit(英语：Contentedit) DIV

Question

我必须插入一些跨度才能将所选内容保存/恢复到内容可编辑的div中。不幸的是，这些跨度必须包含至少一个字符才能允许"range.setStart（startNode，0）;"函数正常工作。所以，这是我的一组元素：

<div contentEditable='true' id='THE_DIV'>
   some text
      <span id='START_SELECTION'>xxx</span>
         selected text
      <span id='END_SELECTION'>yyy</span>
   other text
</div>

现在，通过将span显示属性设置为none应该没有问题，但是虽然Fire Fox正确隐藏了元素，但Internet Explorer（7）似乎忽略了它。

我注意到这个 bheaviour 与 contentEditable 属性有关，但不幸的是我两者都需要（contentEditable 父div 和隐藏跨度子级）。

你有什么建议吗？

提前谢谢你，

弗拉维奥。

Answer 1

这是

IE中的故意行为。您可以运行一个鲜为人知的命令来禁用它：

document.execCommand("RespectVisibilityInDesign", false, true);

请参阅此演示：http://jsfiddle.net/DGWZF/1/

另外，你看过Rangy的选择保存和恢复模块吗？它完全符合您的要求。 披露：我是Rangy的主要开发人员。

Answer 2

非常感谢蒂姆，我已经尝试过您的 Rangy 插件（查看之前的几个答案），它非常接近我正在寻找的内容。不幸的是，我在通过箭头键移动光标时注意到 FF 中的一种奇怪行为。当光标进入另一个跨度时，左箭头不起作用。

我试图说得更清楚：

<div contenteditable='true' id='THE_EDITOR'>
   some text <span class='in_red'>other in red</span><span class='in_blue'>||or in blue</span>
</div>

我使用"||"来表示光标。在这种情况下：<span></span><span>||</span>左箭头无法在 FF 中移动光标（我不明白原因），但如果两个元素之间至少有一个字符，则工作正常：<span></span>[space]<span>||</span>

如果你想尝试重现这个"错误"，代码是（使用JQuery）：

$("#THE_EDITOR").attr("contentEditable","true").keyup(function(){
   var savedSel = rangy.saveSelection();
   //this blok is only to clean the HTML code every time
   $(this).children(".star").each(function(){
      $(this).after($(this).html());
      $(this).remove();
   });
   //to wrap the spewial word "*" with a personal formatting span
   var str = $(this).html();
       str = str.split("*").join("<span class='star'>*</span>");
   $(this).html(str);
   rangy.restoreSelection(savedSel);
   rangy.removeMarkers(savedSel);
});

如果您尝试按顺序键入两个或多个"*"，然后使用向左箭头向后移动，光标将不会移动。在它们之间放置一个空格或其他字符，它将再次移动。