嵌入对象后面的jquery组合框(仅限IE）

jquery combobox behind embedded object (IE only)

本文关键字：仅限 IE 组合 jquery 对象      更新时间：2023-09-26

在Internet Explorer中，我有一个jquery组合框，它在嵌入对象（例如pdf文档）后面打开。如何确保组合框始终位于嵌入对象的前面？

参见此小提琴示例：http://jsfiddle.net/RDd3A/258/（更新的小提琴包含我试图解决它）

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="transplant"作为属性
  • 使用？wmode=url中的transplant
  • 使用iframe
  • 使用z索引

不幸的是，这没有帮助，组合框仍然位于嵌入文档后面。任何人

这是一个已知的IE问题，我前段时间做了一项调查，我知道的唯一方法已经被@Gyum Fox提到了——另一个"面具"iframe。然而，你不必把一个iframe"介于"；元素-您可以将绝对定位的iframe放在100%高度和宽度的相应元素内。要放置在元素内部的iframe的CSS：

iframe.ie-fix {
   position: absolute;
   border: none;
   top: 0;
   left: 0;
   height: 100%;
   width: 100%;
   z-index: -1;
}

jQuery动态构建菜单内容的问题，因此我们需要处理一些事件来插入掩码。这个简单的代码为页面上的所有菜单添加了掩码。不是一个完整的解决方案，但显示了方法：

$('.ui-button').click(function() {
     $('.ui-menu').append("<iframe class='ie-fix' src='about:blank'></iframe>" ); 
});

理想情况下，我们只需要更新相应的菜单，但我需要更深入地挖掘jQuery的源代码来实现这一点，稍后将尝试解决。

JS Fiddle与完整的示例

这是一个IE问题。我在JQueryUI中的模式对话框中使用组合框时也遇到了类似的问题。组合框在Chrome或Firefox中运行良好。我发现解决该问题的唯一方法是将其放置在iframe中。我在模态对话框中为我工作。

IE和JQuery似乎配合得很好，只要你不做任何太花哨的事情。我还尝试在模式对话框中放置一个s选择框，但也不起作用。当必须嵌套两个JQueryUI元素时，我避免使用它们。

既然udalmik首先回答了，那么您应该使用他的实现。

相关文章：