如何解决IE6中的选择重叠错误？

Question

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

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

FogBugz 实际上有一个非常聪明的解决方案（在 v6 之前），当显示弹出窗口时，将每个选择都转换为文本框。这解决了错误并欺骗了用户的眼睛，但行为并不完美。

另一个解决方案是在 FogBugz 6 中，他们不再使用 select 元素并在各处重新编码。

我当前使用的最后一个解决方案是弄乱 IE 渲染引擎并强制它渲染绝对定位 <div> 也作为 ActiveX 元素，确保它可以存在于选择的元素上。这是通过放置一个不可见的 <iframe> 在 - 的里面 <div> 并用以下内容设计它：

#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> 技巧是一个很好的解决方案，但我仍在寻找改进，例如删除它 丑陋无用的标签 这会降低可访问性。

Answer 1

我不知道还有什么比 Iframe 更好的了

但我确实想到这可以通过寻找几个变量来添加到 JS 中

1. 浏览器6
2. 高 Z 索引（如果您将 div 浮动，则往往必须设置 z 索引）
3. 一个盒子元素

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

保罗

Answer 2

感谢您提供 iframe 黑客解决方案。它很丑，但仍然很优雅。:)

只是一个评论。如果您碰巧通过 SSL 运行您的网站，则虚拟 iframe 标记需要指定 src，否则 IE6 将发出安全警告。

例子：

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

我看到有些人建议将 src 设置为 Blank.html ...但我更喜欢javascript。去搞清楚。

Answer 3

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

Answer 4

试试这个插件 http://docs.jquery.com/Plugins/bgiframe ，应该可以！

用法： $('.your-dropdown-menu').bgiframe();

Answer 5

我认为不存在。我试图在工作中解决这个问题。隐藏选择控件是我们能想到的最好的办法（作为一家拥有固定受众的公司商店，用户体验通常不会影响 PM 的决策）。

从我在寻找解决方案时在网上收集到的信息来看，没有好的解决方案。我喜欢 FogBugz 解决方案（许多知名网站（例如 Facebook）也采用同样的方法），这实际上是我在自己的项目中使用的解决方案。

Answer 6

我对选择框和 Flash 做了同样的事情。

使用覆盖层时，隐藏将穿透的底层对象。这不是很好，但是很有效。您可以使用 JavaScript 在显示叠加层之前隐藏元素，然后在完成后再次显示它们。

除非绝对必要，否则我尽量不要搞乱 iframe。

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

Answer 7

Mootools 有一个使用 iframe 的非常完善的解决方案，称为 iframeshim。

不值得仅仅为此而包含库，但如果您的项目中有它，您应该知道“iframeshim”插件的存在。

Answer 8

有一个简单明了的 jquery 插件，称为 bgiframe。开发者创建它的唯一目的就是解决 ie6 中的这个问题。

我最近使用过，它的效果就像一个魅力。

Answer 9

隐藏选择元素时，通过设置“可见性：隐藏”而不是显示：否则浏览器将重新排列文档。

Answer 10

我通过在显示对话框或覆盖层时使用 CSS 隐藏选择组件来修复此问题：

selects[i].style.visibility = "隐藏";

function showOverlay() {
    el = document.getElementById("overlay");
    el.style.visibility = "visible";
    selects = document.getElementsByTagName("select");
    for (var i = 0; i < selects.length; i++) {
        selects[i].style.visibility = "hidden";
    }
}

function hideOverlay() {
    el = document.getElementById("overlay");
    el.style.visibility = "hidden";
    var selects = document.getElementsByTagName("select");
    for (var i = 0; i < selects.length; i++) {
        selects[i].style.visibility = "visible";
    }
}