3

所以我正在使用 jQuery UI 的对话框。但正如我所读的，IE6 中有一个常见的错误（不幸的是，我必须确保它适用）下拉列表不关注 z-index 队列。我还读到有一个方便的插件叫做 bgiframe 来解决我的覆盖问题。我发现人们说使用它的两种不同方式，但都不起作用。我可能只是在做一些非常愚蠢的事情，但我需要让它发挥作用。

包括 jQuery.bgiframe.js 版本 2.1.1 以下是我尝试在不工作的情况下使用它的两种方法：（我在我正在处理的页面中包含了所有 jQuery-UI、jQuery 和 bgiframe）

  1. 实际插件的文档说这样做：

    $("#selectDropdownThatNeedsFixing").bgiframe();

    这会导致一个 jQuery 异常，说 Object 是预期的。

  2. 我从以下页面看到的第二种方式：http: //docs.jquery.com/UI/Dialog/dialog基本上你只是bgiframe: true在初始化对话框时设置：

    $( ".selector" ).dialog({ bgiframe: true });

这不会出错，但是当我测试它时，问题仍然存在于 IE6 中。

我错过了什么吗？我应该以哪种方式使用 bgiframe？任何方向将不胜感激。谢谢您的帮助！

4

2 回答 2

6

您不需要为此使用插件。IE6 和 z-index 的问题是，IE6 中的定位元素会生成一个新的堆叠上下文，从 z-index 值 0 开始。因此 z-index 在 IE6 中无法正常工作。此问题的解决方法是在父选择器中指定一个 z-index 值，该值等于在子选择器中指定的 z-index。

在http://jsfiddle.net/ebgnu/2/检查工作示例

下面是我在 jsfiddle 中做的例子。

.parent{
    position: relative;
    color:white;
}
.parent#a {
    height: 2em;
    z-index: 1;
}
.parent#a .child{
    position: absolute;
    height: 6em;
    width: 2em;
    z-index: 1;
    background:blue;
}
.parent#b {
    height: 2em;
    background:red;
}

<div class="parent" id="a">
    <div class="child">a</div>
</div>
<div class="parent" id="b">
    <div class="child">b</div>
</div>

看看.parent#a这是 z-index 为 1 的子选择器的父a级。在此示例中，a 将位于 b 之上。假设我们想让 b 在 a 上。我们需要做的就是将孩子a及其父母的值更改为z-index: 0. 这会将其发送到后面。

于 2011-02-27T07:37:54.107 回答
1

我相信你应该在 上调用bgiframe插件dialog，而不是< select >. 当前的 jQuery UI 版本似乎不再列出bgiframe对话框小部件的选项。

您得到的 jQuery 异常似乎表明，您所定位的元素对于指定的选择器 ( #selectDropdownThatNeedsFixing) 不存在。

如果问题仍然存在，请尝试使用 IE 开发人员工具栏查看iframe是否实际创建。

于 2011-02-23T19:38:50.977 回答