如何解决IE6中的选择重叠错误？ [英] How to solve the select overlap bug in IE6?

问题描述

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

When using IE, you cannot put an absolutely positioned div over a select input element. That's because the select element is considered an ActiveX object and is on top of every HTML element in the page.

我已经看到人们在打开弹出div时隐藏了selects，

I already saw people hiding selects when opening a popup div, that leads to pretty bad user experience having controls disappearing.

FogBugz实际上有一个非常聪明的解决方案（在v6之前），可以在显示弹出窗口时将每个选择都变成文本框。

FogBugz actually had a pretty smart solution (before v6) of turning every select into text boxes when a popup was displayed. This solved the bug and tricked the user eye but the behavior was not perfect.

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

Another solution is in FogBugz 6 where they no more use the select element and recoded it everywhere.

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

Last solution I currently use is messing up the IE rendering engine and force it to render the absolutely positioned <div> as an ActiveX element too, ensuring it can live over a select element. This is achieved by placing an invisible <iframe> inside the <div> and styling it with:

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

有人能比这个解决方案更好吗？

Does anyone have an even better solution than this one?

编辑：该问题的目的是提供很多有实际意义的信息。我发现< iframe> 技巧是一个很好的解决方案，但我仍在寻求改进，例如删除此难看的无用标签，这会降低可访问性。

The purpose of this question is as much informative as it is a real question. I find the <iframe> trick to be a good solution, but I am still looking for improvement like removing this ugly useless tag that degrades accessibility.

推荐答案

我不知道什么比Iframe更好

I don't know anything better than an Iframe

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

But it does occur to me that this could be added in JS by looking for a couple of variables

1. IE 6


2. 较高的Z索引（如果将div浮动，则往往必须设置z索引）


3. 一个框元素

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

Then a script that looks for these items and just add an iframe layer would be a neat solution

保罗

这篇关于如何解决IE6中的选择重叠错误？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！