所以我正在使用 jQuery UI 的对话框。但是正如我所读的那样,IE6 中存在一个常见错误(不幸的是我必须确保它适用于)下拉列表不关注 z-index 队列。我还读到有一个名为 bgiframe 的方便插件可以解决我的叠加问题。我发现了人们所说的 2 种不同的使用方式,但都不起作用。我可能只是在做一些非常愚蠢的事情,但我需要让它发挥作用。
包括 jQuery.bgiframe.js 版本 2.1.1 以下是我尝试在不工作的情况下使用它的 2 种方法:(我在我正在处理的页面中包含了所有 jQuery-UI、jQuery 和 bgiframe)
实际插件的文档说这样做:
$("#selectDropdownThatNeedsFixing").bgiframe();
这会导致一个 jQuery 异常,提示 Object expected。
第二种方式是我从下页看到的:http://docs.jquery.com/UI/Dialog/dialog基本上,您只需在初始化对话框时设置
bgiframe: true
:$( ".selector" ).dialog({ bgiframe: true });
这个没有报错,但是我测试的时候IE6还是有这个问题。
我错过了什么吗?我应该以哪种方式使用 bgiframe?任何方向将不胜感激。感谢您的帮助!
最佳答案
您不需要为此使用插件。 IE6 和 z-index 的问题在于,IE6 中的定位元素会生成一个新的堆栈上下文,该上下文以 0 的 z-index 值开始。因此 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
这是子选择器 a
的父级,其 z-index 为 1。在此示例中,a 将位于顶部湾的。假设我们想让 b 在 a 之上。我们需要做的就是将子 a
及其父级的值更改为 z-index: 0
。这会将它发送到后面。
关于jquery - 带有 jQuery UI 1.8.9 对话框和 jQuery 1.5 的 bgiframe,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5043675/