html - css display none 属性不适用于 Internet Explorer 上的 contenteditable div

Question

我必须插入一些跨度以将选择保存/恢复到 contentEditable 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 display 属性设置为 none 应该没有问题，但是当 Fire Fox 正确隐藏元素时，Internet Explorer (7) 似乎忽略了它。

我注意到这个行为与 contentEditable 属性有关，但不幸的是我需要两者(contentEditable parent div 和 hidden span children)。

你有什么建议吗？

提前谢谢你，

弗拉维奥。

Answer 1

这是 IE 中的故意行为。有一个 little-known command你可以运行来禁用它:

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

查看此演示:http://jsfiddle.net/DGWZF/1/

还有，你见过Rangy's selection save and restore module吗？ ？它正是你想要做的。披露:我是 Rangy 的主要开发人员。