Question

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

包括jQuery.bgiframe.js版本2.1.1 以下是我尝试使用它而无需工作的两种方法:(我在我正在处理的页面中包含了所有jQuery-UI，jQuery和bgiframe）

来自实际插件的文档说：
```
$("#selectDropdownThatNeedsFixing").bgiframe();
```
这会导致jQuery异常，说对象是预期的。
我在下一页中看到的第二种方式：http://docs.jquery.com/UI/Dialog/dialog基本上只是在初始化对话框时设置bgiframe: true：
```
$( ".selector" ).dialog({ bgiframe: true });
```

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

我错过了什么吗？我应该用哪种方式使用bgiframe？任何方向都会非常感激。谢谢你的帮助！

Answer 1

您不需要使用插件。 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及其父亲的值更改为z-index: 0。这将把它发送到后面。

Answer 2

我认为您应该拨打bgiframe上的dialog插件，而不是< select >。当前的jQuery UI版本似乎不再列出对话框小部件的bgiframe选项。

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

如果问题仍然存在，请尝试使用IE Developer Toolbar查看是否实际创建了iframe。

bgiframe与jQuery UI 1.8.9 Dialog和jQuery 1.5

2 个答案:

检查http://jsfiddle.net/ebgnu/2/