在 Internet Explorer 中,我有一个 jquery 组合框,它在嵌入式对象(例如 pdf 文档)后面打开。如何确保组合框始终位于嵌入对象的前面?
有关示例,请参阅此 fiddle :http://jsfiddle.net/RDd3A/258/ (更新的 fiddle 包含我尝试解决它的尝试)
HTML:
<select id="combobox">
<option value="">Select one...</option>
<option value="23">Really long stuff that might wrap</option>
<option value="25">Normal Stuff</option>
</select>
<br/>
<embed src="https://www.xs4all.nl/media/transparantie/Transparantierapport-2012.pdf"/>
Javascript:
$("#combobox").combobox();
(我已经剥离了所有的 css)
我已经尝试过以下方法:
- 使用 wmode="transparant"作为属性
- 在 url 中使用 ?wmode=transparant
- 使用 iframe
- 使用 z-index
不幸的是,这没有帮助,组合框仍然在嵌入文档的后面。有人吗?
最佳答案
这是一个已知的 IE 问题,我前段时间进行了调查,@Gyum Fox 已经提到了我所知道的唯一方法 - 另一个“掩码”iframe
.但是,您不必在元素“之间”放置 iframe - 您可以将绝对定位的 iframe
放置在具有 100% height 的相应元素内和宽度。
要放置在元素内的 iframe 的 CSS:
iframe.ie-fix {
position: absolute;
border: none;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: -1;
}
jQuery动态构造菜单内容的问题,所以我们需要处理一些事件来插入 mask 。这个简单的代码为页面上的所有菜单添加了掩码。不是一个完整的解决方案,但是显示了方法:
$('.ui-button').click(function() {
$('.ui-menu').append("<iframe class='ie-fix' src='about:blank'></iframe>" );
});
理想情况下,我们只需要更新相应的菜单,但我需要更深入地挖掘 jQuery 的源代码才能实现这一点,稍后会尝试解决。
JS Fiddle有完整的例子
关于javascript - 嵌入式对象后面的 jquery 组合框(仅限 IE),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25760079/