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

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中添加

1. IE 6
2. 一个高Z-Index(你倾向于设置一个z-index,如果你浮动一个div)
3. 一个盒子元素

然后,查找这些项目并只添加iframe层的脚本将是一个简洁的解决方案

保罗

Answer 2

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

只是评论.如果您碰巧通过SSL运行您的站点,则虚拟iframe标记需要指定src,否则IE6会抱怨安全警告.

例:

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

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