确实有效
使用iframe方式解决，如下例子
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<style type="text/css">
body {margin:0;padding:0;text-align:center;background-color:#eee;}
#bd {margin:20px auto;padding:5px 20px 20px;border:1px solid #bbb;width:760px;background-color:#9CCE2E;}
#popup {
position:absolute;left: 443px;top:87px;}
.layer{
width:300px;height:100px;padding:10px;border: 1px solid blue;background-color:#fff; }
#popup iframe{display:none;_display:block;position:absolute;top:0;left:0px;z-index:-1;
filter:mask();
width:320px;height:120px;
}
</style>
</head>
<body>
<div id="bd">
<h1>IE6下div遮盖select的解决方案</h1>
<div><label for="ddTest">Test</label>
<select id="ddTest">
<option>…</option>
<option>pick me</option>
</select>
</div>
</div>
<div id="popup">
<div class="layer">Is the select element poking through? </div>
<iframe></iframe>
</div>
</body>
</html>
注意绿色代码段。
工作原理：iframe能盖住select下拉菜单。
在弹出层增加iframe，并
采用绝对定位，z-index:-1让iframe浮于弹出层下方；
filter:mask();
让iframe透明~
display:none;_display:block;保证FF，IE7以上版本不受影响
width,height值确保iframe大小跟弹出层大小相同
注意事项：
弹出层 最外层区域只设置定位样式（position，left，top,z-index...），避免设置风格显示样式(特别注意边框) 因为iframe在其内，当边线刚好和select框重叠，边线将被select覆盖，影响显示效果
缺陷：需要根据弹出层大小不同，设置iframe大小，局限比较大。
当弹出层为半透明时，被覆盖的下拉菜单消失
分享到：
相关推荐
jQuery popmenu插件是一款专为创建响应式弹出菜单而设计的工具，它能够帮助开发者快速构建适应不同屏幕尺寸的下拉菜单系统，提供良好的触摸设备支持。由于不支持IE8及以下版本的浏览器，popmenu插件充分利用了现代...
解决方案是在弹出层下方添加一个透明的iframe背景，通过调整iframe的z-index值，可以有效地解决这个问题。这种方式虽然古老，但在处理老版本IE浏览器时仍有一定的效果。 关于树型组件的核心知识点包括： 1. **DOM...
ArtDialog还支持弹出菜单，可以创建出层次分明、易于操作的下拉菜单，这对于网站的导航或设置选项非常有用。而调用外部页面的功能则使得ArtDialog可以加载并显示其他网页内容，这在实现内嵌页面或者跨页面操作时非常...
在网页设计中，有时我们需要使一个`div`元素覆盖或浮动在`select`元素之上，以便实现特定的交互效果，如弹出层、提示信息或者自定义下拉菜单等。然而，由于浏览器之间的渲染差异，这往往成为一个挑战。本文将探讨...
在IE6浏览器中，一个常见的问题是在页面上使用div创建的浮动层（通常用于弹出窗口或下拉菜单）会被网页中的下拉列表（DropDownList）遮挡。这是因为IE6处理下拉列表的方式不同，它将DropDownList视为系统级别的控件...
在本文中，我们将探讨如何利用jQuery操作DOM来实现页面上的遮罩层弹出效果，以及如何针对Web端和移动端防止遮罩层在滚动时发生滑动，从而确保用户体验的一致性和优化。 首先，让我们来看看页面遮罩层的基本概念。...
在IE6浏览器中，一个常见的布局问题是下拉选择框（select元素）在使用div元素制作蒙版或弹出层时会被覆盖，即使给div设置了更高的z-index也无法解决。此问题的根本原因在于IE6对z-index属性的解释与其它浏览器不同，...
绝对定位则常用于创建层叠效果，比如弹出层、下拉菜单等。 在实际的开发过程中，要灵活运用这些属性来实现设计要求。比如，当你需要一个元素始终固定在页面的特定位置，即使页面滚动也不改变位置时，就可以使用...
4. **下拉菜单（Dropdown）**：提供美观的下拉菜单解决方案，适用于导航栏或者表单元素的选择。 5. **焦点图（Tabs）**：用于实现多面板的切换，常见于网站的导航或者内容展示。 6. **输入验证（Validator）**：...
- 下拉菜单：通过JavaScript实现的多级下拉菜单，提升导航栏的用户体验。 - 弹出窗口：JavaScript创建的模态对话框，常用于显示详细信息或用户确认操作。 - 表单验证：使用JavaScript对用户输入的数据进行实时...
4. 实现表情选择界面，可以是下拉菜单、弹出层或者浮动面板。 5. 处理用户的选择，将选中的表情插入到目标位置。 6. 对于魔法表情，可能还需要处理额外的交互逻辑，如动画播放和事件监听。 总之，这个JS表情库提供...
-修正了弹出菜单的位置在Firefox下不正确的BUG(feedback:eroach)。 -为TriggerBox和TwinTriggerBox增加EnableEdit属性。 -使用Hidden来显示隐藏ExtAspNet控件，而不是使用Visible属性（Visible目前设置为只读属性...
-修正了弹出菜单的位置在Firefox下不正确的BUG(feedback:eroach)。 -为TriggerBox和TwinTriggerBox增加EnableEdit属性。 -使用Hidden来显示隐藏ExtAspNet控件，而不是使用Visible属性（Visible目前设置为只读属性...
- 弹出层中的弹出层关闭，父窗口失去焦点问题。 - 代码中grunt部分代码拆分开，放到程序外面；提交到git、osc - 桌面：删除alert enter快捷键删除 - install 检测 加入跳过，(只判断用到的函数) 加入多语言 - ...
6. **丰富的UI组件**：除了基础的jQuery插件，DWZ还提供了一系列自定义的UI组件，如表单验证、下拉菜单、弹出层、分页等，这些组件在提升用户体验方面发挥了重要作用。 7. **开发文档**：压缩包中的"dwz-user-guide...
2. **UI组件**：包括导航条（Navbar）、下拉菜单（Dropdown）、模态框（Modal）、轮播图（Carousel）、按钮组（Button Group）、表单元素（Form Elements）、提示信息（Tooltips）和弹出层（Popovers）等，这些都是...
2. **丰富的UI组件**：包括表格、表单、弹出层、对话框、树形结构、分页、下拉菜单、按钮、提示等，覆盖了日常开发中的各种界面元素。 3. **Ajax无刷新交互**：通过Ajax技术，实现页面的局部刷新，提高用户交互体验...
5. **UI组件**：DWZJS内含一系列丰富的UI组件，如按钮、下拉菜单、日期选择器、分页、对话框、弹出层等，这些组件样式统一，易于使用，能快速提升网页的视觉效果和交互性。 6. **Ajax操作**：DWZJS对Ajax进行了封装...
除了上述组件，BJUI还包含弹出层（Modal）、提示（Tips）、分页（Pager）、时间选择器（DatePicker）等多种常用组件，覆盖了日常开发中的大多数需求。 7. **主题定制** BJUI允许开发者自定义主题，通过调整CSS...
8.[纠正]纠正部分浏览器后台列表管理的多选处理按钮和下拉菜单失效的BUG 9.[改变]后台兼容模式提升到IE8模式 10.修复其他诸多小细节 2013年07月19日 V2.74更新包 1.[新增]后台引导页加入非IE浏览器提示，后台部分...