IE designMode Showing display:none Divs答案

【问题标题】：IE designMode Showing display:none DivsIE designMode Showing display:none Divs
【发布时间】：2008-12-31 21:15:21
【问题描述】：

我对此做了很多研究，但我无法解决这个问题。我有一个包含多个 Div 的 Div，我想在打开 TinyMCE 实例之前隐藏它们。

我通过 jQuery 来做这件事 -

$(".drop").hide()

这很好用，除了 Trident (IE) 之外的所有浏览器引擎都会隐藏它们。如果我检查 IE 中的元素，css 会显示“display:none”。

我发现了一些文章和注释，说明这是 IE 的一项功能如何显示这些元素，包括 MSDN 上的这篇文章：http://msdn.microsoft.com/en-us/library/aa770023(VS.85).aspx

问题是我需要隐藏这些。有什么想法吗？

【问题讨论】：

【解决方案1】：

这是因为在可编辑元素内部，IE 会生成所有内容，包括使用 display: none、editable 隐藏的元素。除了从页面的 DOM 中删除要隐藏的元素之外，您无能为力。

【讨论】：

【解决方案2】：

您可以尝试应用一种将显示设置为非无的样式，例如：

.drop
{
    display: block; // or inline
}

这听起来像是由于 IE 需要元素“具有布局”以便对其进行某些操作，隐藏是其中之一。给定显示类型的元素应该有布局，也就是说，它占用空间并强制浏览器重新组织它周围的兄弟元素。

【讨论】：

【解决方案3】：

据我所知，tinyMCE 使用 iframe 进行编辑并在 iframe 内启用编辑模式，因此如果您在加载 tinyMCE 之前处于编辑模式，您确定必须将外部文档置于编辑模式。

澄清一下，您是想影响 iframe 的内部还是 tinyMCE 正在加载包含 display: none 的内容

从表面上看，如果您将带有 display: none 的内容加载到 tinyMCE 中，您可能需要做一些混乱的解决方法，即删除加载时的节点并尝试在保存时将它们重新插入到相同的位置。

我能看到的唯一好处是，如果在其他浏览器中，您只需选择节点两侧的文本，就会在不知不觉中删除隐藏节点。

【讨论】：