Question

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

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

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

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

我目前使用的最后一个解决方案是弄乱IE渲染引擎并强制它将绝对定位的<div>渲染为ActiveX元素，确保它可以存在于select元素上。这是通过在<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中

IE 6
一个高Z-Index（你倾向于必须设置一个z-index，如果你浮动一个div）
框元素

然后，查找这些项目并只添加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使用名为iframeshim的iframe有一个非常好的解决方案。

不值得为此包含lib，但如果你在项目中有它，你应该知道'iframeshim'插件存在。

Answer 8

有一个名为bgiframe的简单直接的jquery插件。开发人员创建它的唯一目的是在ie6中解决这个问题。

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

Answer 9

当隐藏select元素时，通过设置“visibility：hidden”而不是display：none来隐藏它们，否则浏览器将重新流动文档。

Answer 10

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

选择[i] .style.visibility =“hidden”;

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";
    }
}

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

10 个答案: