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

时间:2008-08-11 16:45:10

标签: html css internet-explorer-6 html-select

使用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>技巧是一个很好的解决方案,但我仍在寻找改进,比如删除这个降低可访问性的丑陋的无用标记

10 个答案:

答案 0 :(得分:7)

我不知道比iframe更好的事情

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

  1. IE 6
  2. 一个高Z-Index(你倾向于必须设置一个z-index,如果你浮动一个div)
  3. 框元素
  4. 然后,查找这些项目并只添加iframe层的脚本将是一个简洁的解决方案

答案 1 :(得分:5)

感谢iframe黑客解决方案。它很丑陋而又优雅。 :)

只是评论。如果你碰巧通过SSL运行你的网站,虚拟iframe标签需要指定一个src,否则IE6会抱怨安全警告。

示例:


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

我见过有人推荐将src设置为blank.html ...但我更喜欢javascript方式。去搞清楚。

答案 2 :(得分:2)

据我所知,只有两个选项,其中最好的是使用iframe。另一个是在显示叠加层时隐藏所有选择,从而带来更逼真的用户体验。

答案 3 :(得分:1)

试试这个插件http://docs.jquery.com/Plugins/bgiframe,它应该有效!

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

答案 4 :(得分:0)

我认为没有。我试着在工作中解决这个问题。隐藏精选控制是我们能想到的最好的(作为一个拥有受众群体的公司商店,用户体验通常不会影响PM的决策)。

从寻找解决方案时我可以在线收集的信息来看,这并没有很好的解决方案。我喜欢FogBugz解决方案(与Facebook等许多知名网站一样),这实际上就是我在自己的项目中使用的。

答案 5 :(得分:0)

我使用选择框和Flash做同样的事情。

使用叠加层时,隐藏可以穿过的基础对象。它不是很好,但它的确有效。您可以使用JavaScript在显示叠加层之前隐藏元素,然后在完成后再次显示它们。

我尽量不要搞乱iframe,除非绝对必要。

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

答案 6 :(得分:0)

Mootools使用名为iframeshim的iframe有一个非常好的解决方案。

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

答案 7 :(得分:0)

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

答案 8 :(得分:0)

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

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

答案 9 :(得分:0)

我通过在显示对话框或叠加层时使用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";
    }
}