如何解决在IE6选择重叠的bug?

问题描述 投票:24回答:10

当使用IE浏览器,你不能把一个绝对定位的div在选择输入元素。这是因为选择的元素被认为是一个ActiveX对象,并在页面中的每一个HTML元素的顶部。

我已经看到人们选择躲藏打开一个弹出的div时,导致其消失的控制非常糟糕的用户体验。

FogBugz的实际上有把每选择到文本框被显示弹出时的一个非常聪明的解决方案(V6之前)。这解决了错误和欺骗用户眼球,但行为是不完美的。

另一种方案是在6 FogBugz的,他们没有更多的使用选择元素,重新编码它无处不在。

最后的解决方案我目前使用的是搞乱了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>伎俩是一个很好的解决方案,但我现在还在找工作的改进,如消除降解无障碍这一丑恶无用的标签。

html css internet-explorer-6 html-select
10个回答
8
投票

我不知道不是iFrame什么都好

但它确实发生了,我认为这可以在JS中添加通过寻找几个变量

  1. IE 6
  2. 高Z-指数(你往往需要设置的z-index如果你是漂浮在一个div)
  3. 一箱元素

然后,以查找这些项目,只需添加一个iframe层的脚本将是一个巧妙的解决办法

保罗


0
投票

我解决了这个问题,通过使用CSS时,将显示一个对话框或覆盖隐藏选择组件:

选择[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";
    }
}

5
投票

感谢您的IFRAME黑客的解决方案。它的丑陋,又不失典雅。 :)

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

例:


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

我见过一些人建议设置src指向blank.html ...但我喜欢的JavaScript方式更多。去搞清楚。


2
投票

据我所知,只有两个选择,其中较好的一个iframe的提到使用。另一种是隐藏所有选择时,将显示叠加,导致甚至怪异的用户体验。


1
投票

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

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


0
投票

我不觉得有什么。我试着在我的工作来解决这个问题。隐藏选择控制是我们可以拿出最好的(作为一个企业车间用俘虏观众,用户体验不一般因素到PM的决定)。

从我能在网上搜集寻找一个解决方案时,也只是没有很好地解决了这一点。我喜欢的FogBugz溶液(很多高知名度的网站,如Facebook做同样的事情),这实际上是我在我自己的项目中使用。


0
投票

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

当使用叠加,隐藏将推动通过的基础对象。这不是很大,但它的作品。您可以使用JavaScript来隐藏元素只显示一个覆盖之前,然后再告诉他们,一旦你就大功告成了。

我尽量不惹I帧,除非它是绝对必要的。

覆盖在使用标签或文本框,而不是选择框的诀窍是整齐的。我可以用在未来。


0
投票

MooTools有使用iframe一个很好heshed出解决方案,称为iframeshim。

不值得包括刚才这个的lib,但如果你在你的项目有它无论如何,你应该知道的是,“iframeshim”插件存在。


0
投票

有一个称为bgiframe这个简单而直接的jQuery插件。开发人员创建它在IE6解决这个问题的唯一目的。

我最近使用,它的工作原理就像一个魅力。


0
投票

隐藏当选择元素通过设置隐藏“visibility:hidden的”,而不是显示:无否则浏览器会重新流文件。

© www.soinside.com 2019 - 2024. All rights reserved.