`

IE6弹出层盖不住下拉菜单的解决方案 (转)

阅读更多
确实有效

使用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大小,局限比较大。
当弹出层为半透明时,被覆盖的下拉菜单消失
为了您的安全,请只打开来源可靠的网址

打开网站     取消

来自: http://hi.baidu.com/tolinlin/blog/item/cc51d008d1d3e1d662d9863f.html
分享到:
评论

相关推荐

    jQuery响应式弹出菜单插件popmenu

    jQuery popmenu插件是一款专为创建响应式弹出菜单而设计的工具,它能够帮助开发者快速构建适应不同屏幕尺寸的下拉菜单系统,提供良好的触摸设备支持。由于不支持IE8及以下版本的浏览器,popmenu插件充分利用了现代...

    javascript树型组件可做弹出的树型下拉列表

    解决方案是在弹出层下方添加一个透明的iframe背景,通过调整iframe的z-index值,可以有效地解决这个问题。这种方式虽然古老,但在处理老版本IE浏览器时仍有一定的效果。 关于树型组件的核心知识点包括: 1. **DOM...

    ArtDialog Vista风格高兼容度的javascript对话框组件 ArtDialog 仿Vista风格的javascript对话框组件,具有超高的兼容性,对IE、火狐、Google浏览器兼容都不错,而且设计精美,弹出框的功能也很多:比如弹出图片、弹出动画、右下角消息、询问框、警告、弹出菜单、调用外部页面等,代码书写规范,也可作为学习JavaScript的参考范例。

    ArtDialog还支持弹出菜单,可以创建出层次分明、易于操作的下拉菜单,这对于网站的导航或设置选项非常有用。而调用外部页面的功能则使得ArtDialog可以加载并显示其他网页内容,这在实现内嵌页面或者跨页面操作时非常...

    让div浮动在select之上的完美解决方案!多浏览器兼容

    在网页设计中,有时我们需要使一个`div`元素覆盖或浮动在`select`元素之上,以便实现特定的交互效果,如弹出层、提示信息或者自定义下拉菜单等。然而,由于浏览器之间的渲染差异,这往往成为一个挑战。本文将探讨...

    div等浮层在IE6下被下拉框遮挡的解决方法

    在IE6浏览器中,一个常见的问题是在页面上使用div创建的浮动层(通常用于弹出窗口或下拉菜单)会被网页中的下拉列表(DropDownList)遮挡。这是因为IE6处理下拉列表的方式不同,它将DropDownList视为系统级别的控件...

    jQuery操作dom实现弹出页面遮罩层(web端和移动端阻止遮罩层的滑动)

    在本文中,我们将探讨如何利用jQuery操作DOM来实现页面上的遮罩层弹出效果,以及如何针对Web端和移动端防止遮罩层在滚动时发生滑动,从而确保用户体验的一致性和优化。 首先,让我们来看看页面遮罩层的基本概念。...

    IE6下Select元素被div等元素覆盖的解决办法

    在IE6浏览器中,一个常见的布局问题是下拉选择框(select元素)在使用div元素制作蒙版或弹出层时会被覆盖,即使给div设置了更高的z-index也无法解决。此问题的根本原因在于IE6对z-index属性的解释与其它浏览器不同,...

    深入理解css中position属性及z-index属性(推荐)

    绝对定位则常用于创建层叠效果,比如弹出层、下拉菜单等。 在实际的开发过程中,要灵活运用这些属性来实现设计要求。比如,当你需要一个元素始终固定在页面的特定位置,即使页面滚动也不改变位置时,就可以使用...

    前端项目-jquery-tools.zip

    4. **下拉菜单(Dropdown)**:提供美观的下拉菜单解决方案,适用于导航栏或者表单元素的选择。 5. **焦点图(Tabs)**:用于实现多面板的切换,常见于网站的导航或者内容展示。 6. **输入验证(Validator)**:...

    网页代码 网页特效库2006

    - 下拉菜单:通过JavaScript实现的多级下拉菜单,提升导航栏的用户体验。 - 弹出窗口:JavaScript创建的模态对话框,常用于显示详细信息或用户确认操作。 - 表单验证:使用JavaScript对用户输入的数据进行实时...

    js 普通表情和魔法表情

    4. 实现表情选择界面,可以是下拉菜单、弹出层或者浮动面板。 5. 处理用户的选择,将选中的表情插入到目标位置。 6. 对于魔法表情,可能还需要处理额外的交互逻辑,如动画播放和事件监听。 总之,这个JS表情库提供...

    ExtAspNet_v2.3.2_dll

    -修正了弹出菜单的位置在Firefox下不正确的BUG(feedback:eroach)。 -为TriggerBox和TwinTriggerBox增加EnableEdit属性。 -使用Hidden来显示隐藏ExtAspNet控件,而不是使用Visible属性(Visible目前设置为只读属性...

    ExtAspNet v2.2.1 (2009-4-1) 值得一看

    -修正了弹出菜单的位置在Firefox下不正确的BUG(feedback:eroach)。 -为TriggerBox和TwinTriggerBox增加EnableEdit属性。 -使用Hidden来显示隐藏ExtAspNet控件,而不是使用Visible属性(Visible目前设置为只读属性...

    KODExplorer 芒果云-资源管理器

    - 弹出层中的弹出层关闭,父窗口失去焦点问题。 - 代码中grunt部分代码拆分开,放到程序外面;提交到git、osc - 桌面:删除alert enter快捷键删除 - install 检测 加入跳过,(只判断用到的函数) 加入多语言 - ...

    dwz-ria-1.4.5源码及开发文档

    6. **丰富的UI组件**:除了基础的jQuery插件,DWZ还提供了一系列自定义的UI组件,如表单验证、下拉菜单、弹出层、分页等,这些组件在提升用户体验方面发挥了重要作用。 7. **开发文档**:压缩包中的"dwz-user-guide...

    bootstrap_ace_v1.3.2.rar

    2. **UI组件**:包括导航条(Navbar)、下拉菜单(Dropdown)、模态框(Modal)、轮播图(Carousel)、按钮组(Button Group)、表单元素(Form Elements)、提示信息(Tooltips)和弹出层(Popovers)等,这些都是...

    DWZ开发手册

    2. **丰富的UI组件**:包括表格、表单、弹出层、对话框、树形结构、分页、下拉菜单、按钮、提示等,覆盖了日常开发中的各种界面元素。 3. **Ajax无刷新交互**:通过Ajax技术,实现页面的局部刷新,提高用户交互体验...

    DWZJS客户端框架

    5. **UI组件**:DWZJS内含一系列丰富的UI组件,如按钮、下拉菜单、日期选择器、分页、对话框、弹出层等,这些组件样式统一,易于使用,能快速提升网页的视觉效果和交互性。 6. **Ajax操作**:DWZJS对Ajax进行了封装...

    BJUI前端完整框架

    除了上述组件,BJUI还包含弹出层(Modal)、提示(Tips)、分页(Pager)、时间选择器(DatePicker)等多种常用组件,覆盖了日常开发中的大多数需求。 7. **主题定制** BJUI允许开发者自定义主题,通过调整CSS...

    文章管理系统

    8.[纠正]纠正部分浏览器后台列表管理的多选处理按钮和下拉菜单失效的BUG 9.[改变]后台兼容模式提升到IE8模式 10.修复其他诸多小细节 2013年07月19日 V2.74更新包 1.[新增]后台引导页加入非IE浏览器提示,后台部分...

Global site tag (gtag.js) - Google Analytics