bgiframe与jQuery UI 1.8.9 Dialog和jQuery 1.5

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

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

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

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

   这会导致jQueryexception，说对象是预期的。

2. 我从下一页看到的第二种方式： http bgiframe: true基本上你只需设置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; } 
 
a
 
 
 
b
  

查看.parent#a这是子选择器a的父级，其z-index为1.在此示例中，a将位于b的顶部。 让我们说我们想把b放在上面。 我们需要做的就是将子a和它的父值的值更改为z-index: 0 。 这将把它发送到后面。

Answer 2

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

你得到的jQuery Exception似乎表明，你所定位的元素对于指定的选择器不存在（ #selectDropdownThatNeedsFixing ）。

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