使用IE时，不能将绝对定位的div放在选择输入元素上。这是因为select元素被视为ActiveX对象，并且位于页面中每个HTML元素的顶部。

我已经看到人们在打开弹出div时隐藏了选择，这导致控件消失的用户体验非常糟糕。

FogBugz实际上有一个非常聪明的解决方案(在v6之前)，可以在显示弹出窗口时将每个选择都转换为文本框。这样就解决了该错误并欺骗了用户的视线，但行为并不完美。

另一个解决方案是在FogBugz 6中，他们不再使用select元素并将其重新编码到任何地方。

我当前使用的最后一个解决方案是弄乱IE渲染引擎，并迫使它也将绝对定位的<div>渲染为ActiveX元素，以确保它可以存在于select元素上。这是通过在<div>里面放置一个不可见的<iframe>并用以下样式来实现的：

#MyDiv iframe
{
    position: absolute;
    z-index: -1;
    filter: mask();
    border: 0;
    margin: 0;
    padding: 0;
    top: 0;
    left: 0;
    width: 9999px;
    height: 9999px;
    overflow: hidden;
}

有谁能提供比这个更好的解决方案？

编辑：这个问题的目的是提供大量信息，这是一个真实的问题。我发现<iframe>技巧是一个很好的解决方案，但我仍在寻求改进，例如删除此丑陋的无用标签，从而降低可访问性。

解决方案

回答

我认为没有。我已经在工作中设法解决了这个问题。隐藏选择控件是我们能想到的最好的选择(作为一家拥有大量受众的公司商店，用户体验通常不影响PM的决策)。

从寻找解决方案时可以在线收集的信息来看，没有一个好的解决方案。我喜欢FogBugz解决方案(许多知名网站(例如Facebook)所做的同样的事情)，这实际上是我在自己的项目中使用的解决方案。

回答

据我所知，只有两种选择，其中更好的是提到的iframe用法。另一种是在显示叠加层时隐藏所有选择，从而导致更奇怪的用户体验。

回答

我对选择框和Flash执行相同的操作。

使用叠加层时，隐藏将要推送的基础对象。这不是很好，但是可以。我们可以在显示叠加层之前使用JavaScript隐藏元素，然后在完成后再次显示它们。

除非绝对必要，否则我尽量避免与iframe混淆。

在叠加过程中使用标签或者文本框而不是选择框的技巧很巧妙。我将来可能会用到。

回答

我最了解Iframe

但是我确实发现可以通过查找几个变量将其添加到JS中

• IE 6
• 较高的Z索引(如果将div浮动，则往往必须设置z索引)
• 盒子元素

然后，寻找这些项目并仅添加iframe图层的脚本将是一个很好的解决方案

保罗

回答

感谢我们提供iframe hack解决方案。丑陋而优雅。 :)

只是一个评论。如果我们恰巧通过SSL运行网站，则需要为虚拟iframe标记指定一个src，否则IE6将抱怨并发出安全警告。

例子：

<iframe src="javascript:false;"></iframe>

我见过有人建议将src设置为blank.html ...，但我更喜欢JavaScript方式。去搞清楚。

回答

Mootools使用名为iframeshim的iframe提供了一个非常完善的解决方案。

不值得为此仅包含lib，但是无论如何，如果我们在项目中包含它，则应注意存在'iframeshim'插件。

回答

有一个名为bgiframe的简单易用的jquery插件。开发者创建它的唯一目的是在ie6中解决此问题。

我最近使用过，它的工作原理就像一种魅力。