javascript - 嵌入式对象后面的 jquery 组合框(仅限 IE)

Question

在 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

不幸的是，这没有帮助，组合框仍然在嵌入文档的后面。有人吗？

Answer 1

这是一个已知的 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有完整的例子