IE6：防止Select等元素遮挡弹出Div层

最新推荐文章于 2016-11-14 11:31:04 发布

bad_logic

最新推荐文章于 2016-11-14 11:31:04 发布

阅读量1.1k

点赞数

分类专栏： Web前端

Web前端专栏收录该内容

23 篇文章

订阅专栏

弹出一个新的窗口，只需要window的open方法就搞定了，弹出层就需要用js来控制它的一些CSS属性，如果是IE6以上的浏览器（不包括IE6），是不需要多少行代码的，但是在IE6中就有些麻烦，因为在IE6中Select控件和一些图片元素会遮挡在弹出层的上面，无法达到预期的效果。

上网找了很多解决方案，找出了一种自认为比较容易操作的办法，现和大家分享。Select在IE6下是处于最顶层的，因此想要遮住它，设置zIndex属性是不行的，就需要一个优先级更高的元素，就是iframe，当把iframe嵌套在弹出div层中后，把iframe设置为不可见，但它使弹出的div能浮于select等一些元素之上，因此完美解决了此问题，如下是需要弹出的Div代码，星号内代码为添加的iframe：

<div>
<iframe style="width:100%;filter:alpha(opacity=0);-moz-opacity:0; height:185px; position:absolute; z-index:-1"></iframe> 
</div>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

bad_logic

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

使用iframe快速解决IE6下弹出层被下拉列表遮挡问题

天道酬勤

03-12

1098

周五快下班的时候，收到一个后台研发提交的一个BUG：某君写的弹出层在IE6下被下拉列表遮挡了。（左图为：未弹出选择层效果）（左图为IE8下弹出层效果）（左图为IE6下效果）由于在IE6中，下拉列表拥有比较高权限，会把除frame外的元件遮挡，这是IE6的一个BUG，在IE7及以上版本已经修复。目前了解到只有两种方法可以解决： 1.自定义下拉列表组件；

ie6弹出框被select遮住解决办法

12-23

ie6弹出框被select遮住解决办法. 只要很简单的操作就可以实现，兼容IE6，IE7，IE8，FF |

参与评论您还未登录，请先登录后发表或查看评论

自写jQuery插件，实现简单网页遮罩层/弹出层功能，兼容IE6、IE7

05-06

实现弹出网页遮罩层，可兼容IE6/IE7/IE+++等；缩放浏览器时，内容狂始终居中；有点小bug，在IE6下，遮罩层颜色没透明，屎黑色，等我有空完善下。

SELECT 元素在IE6中遮挡DIV的解决方法

行之苟有恒，久久必自芳

11-17

246

解决IE6 select z-index无效，遮挡div的bug 在最近的一个项目中，遇到了IE6 select遮挡div的bug，为了解决这个bug我查了很多资料，试图找到一个最最有效的方法，很多人是通过iframe的方法来解决，其实我查了国外的很多资料也是通过iframe的方法来解决的。今天我说说iframe解决的一般方法，已经使用jQuery插件bgiframe解决IE6 sel...

两个常用的DIV弹出层效果代码(遮挡整个页面,遮挡可视部分)

weixin_30635053的博客

12-23

379

<!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><title&gt...

IE6下div层被select控件遮住的问题解决方法

09-25

尤其是在IE6浏览器占据主导地位的时代，开发者经常遇到一个特定的布局问题：当一个`div`层位于页面上时，如果`select`下拉框覆盖在`div`之上，IE6浏览器会使得`div`内容不可见，仿佛被`select`控件遮挡。这个问题是...

ie6 select无法被div遮盖的bug解决方法

09-22

在早期的Internet Explorer 6（简称IE6）浏览器中，存在一个著名的布局bug，这个问题主要涉及到`<select>`元素与`<div>`元素的层叠上下文（Z-index）处理。当一个`<div>`元素试图遮盖页面中的下拉列表框`<select>`时...

IE6下 Jquery EasyUI 弹出窗口层无法挡住select 组件解决方案

03-20

本文将详细探讨一个特定的问题，即在Internet Explorer 6（IE6）环境下，使用JQuery EasyUI时，弹出窗口（对话框）无法正确遮挡页面上的select组件，以及如何解决这一问题。 JQuery EasyUI是一个基于jQuery的UI库，...

Js制作简单弹出层DIV在页面居中中间显示遮罩的具体方法

01-19

可以遮挡ie6下的select元素但是在ie6下div没有透明度 2.弹出的div可以一直在浏览器屏幕中间显示问题: 1.目前不支持.class 只支持#id 2.需要显示的div需要自己设置css 3.在ie6下需要设置css 例如div {_position: ...

javascript 弹出层组件（升级版）

10-28

1. IE6下，当弹出层出现时，页面中的`select`元素无法被遮挡。为了解决这个问题，开发者建议在自定义的弹出层`div`中添加`iframe`以达到遮罩效果。组件自带的弹出层已经考虑到了这个问题，可以遮挡住`select`元素。 ...

IE6.0 DIV层被SELECT遮挡的问题以及解决方案

weixin_30843605的博客

11-25

153

在IE6.0以及其以下的版本中，会出现这样的一个情况：DIV层里面的东西会被SELECT标签的内容给遮挡，导致DIV层里面的控件不能完全展示，造成很大的问题。就其原因：在IE6.0中给控件进行属性定位的时候,SELECT是输入一个Window的IE组件，而DIV是输入一个用户的组件，在优先级上SELECT是要比DIV要高的，所以在页面呈现的时候SELECT会遮住用户组件DIV，针对这个...

简单易用兼容IE6的Jquery遮盖层和弹框

胖胖的ALEX

10-22

1196

遮罩层效果兼容ie firefox jQuery遮罩层 .mask{ display:none; position:absolute;top:0;left:0;width:100%;height:100%;background:#000;z-index:100;-moz-opacity:0.8;opacity:.80;filter:alpha(opacity=80);h

js下拉菜单如何才能不被select等form标记挡住

tete的专栏

11-06

1467

要在菜单层下建一个同样大小的iframe. item 1item 2item 3item 4item 5 menu A form selection list

IE6中Div 遮罩层覆盖不住select控件的解决方法

每天=生命的最后一天

12-19

7754

又是一周干着测试员的工作，没有任何任务安排，只得自己找bug来填充每天的日子。突然想到上次在演示的时候，看到在IE6下同事自己写的弹出提示框无法遮住select下拉选择框的问题。当时是去掉了那个下拉框来解决这个问题，但是页面还有很多地方用到这个提示框。用IE6运行一下发现很多页面都存在这个问题。后来同事说在每个页面跳用这个函数之前隐

js javascript 日期控件,IE6中被select标签盖住的BUG,用iframe修正

黑色头发

05-25

151

[code="js"] function PopupCalendar(InstanceName) { ///Global Tag this.instanceName=InstanceName; ///Properties this.separator="-" this.oBtnTodayTitle="Today" this.oBtnCancelTitle="...

select兼容ie6样式

Bling_Bling_的博客

11-14

1747

.select_border { width: 300px; height: 38px; *background: #fff; background: #fff; *border: 1px solid #bdbcbc;

怎么把表单中的按钮放在最下面

最新发布

03-08

<think>好的，用户问怎么把表单中的按钮放在最下面。首先，我需要理解用户的具体需求。通常，表单可能有多个输入字段，按钮默认会紧跟在最后一个元素后面，但用户希望按钮能固定在底部，无论表单内容多少。这时候可能需要用CSS布局来实现。接下来，我得考虑可能的解决方案。常见的方法包括使用Flexbox或者Grid布局，这两种都是现代CSS中常用的布局方式。另外，如果表单内容较多，可能还需要考虑滚动的情况，按钮始终固定在底部，这时候可能需要定位(position)属性，比如fixed或sticky。然后，我需要评估不同方法的适用场景。比如Flexbox适合一维布局，简单易用，而Grid适合更复杂的二维布局。定位属性虽然能固定位置，但可能会覆盖其他内容，需要注意z-index和父容器的溢出设置。还要考虑兼容性问题，Flexbox和Grid在现代浏览器支持良好，但如果用户需要支持旧版浏览器，可能需要备用方案。另外，用户可能对CSS不太熟悉，所以需要给出清晰易懂的代码示例，并解释每个步骤的作用。可能用户遇到的问题包括按钮没有正确对齐，或者表单内容过多时按钮被遮挡。需要提醒用户检查父容器的高度设置，确保布局容器有足够的空间，或者在滚动情况下使用粘性定位。最后，总结几种方法，推荐Flexbox作为首选，因为简单且兼容性好，同时提供其他方法供不同场景选择。确保代码示例正确，并给出实际效果描述，帮助用户理解每种方法的效果。</think>要将表单中的操作按钮固定在底部，可以通过以下 $5$ 种布局方案实现： $$布局示意图$$ ``` ┌───────────────┐ │ 表单内容区域 │ │ (自动撑开高度) │ ├───────────────┤ │ 底部按钮区域 │ └───────────────┘ ``` 🛠️ **实现方案对比**： 1. **Flex弹性布局**（推荐） ```html <form class="form-container"> <div class="content"> <input type="text"> <select>...</select> </div> <div class="button-group"> <button>提交</button> <button>重置</button> </div> </form> ``` ```css .form-container { display: flex; flex-direction: column; min-height: 100vh; /* 根据实际需求调整 */ } .content { flex: 1; /* 关键属性-自动填充剩余空间 */ } .button-group { padding: 15px; background: #f5f5f5; text-align: right; } ``` 2. **Grid网格布局** ```css .form-container { display: grid; grid-template-rows: 1fr auto; /* 关键属性 */ min-height: 400px; } .button-group { align-self: end; } ``` 3. **绝对定位方案** ```css .form-container { position: relative; min-height: 300px; } .button-group { position: absolute; bottom: 0; width: 100%; padding: 20px; } ``` 4. **Margin挤压法** ```css .content { margin-bottom: 60px; /* 预留按钮区域高度 */ } .button-group { position: fixed; bottom: 0; width: 100%; } ``` 5. **Sticky粘性定位** ```css .button-group { position: sticky; bottom: 0; background: white; z-index: 10; } ``` 📊 **方案特性对比表**： | 方法 | 适用场景 | 注意事项 | |---------------|--------------------------|----------------------------| | Flex布局 | 现代浏览器 | 需要设置容器高度 | | Grid布局 | 复杂布局需求 | 旧版IE不支持 | | 绝对定位 | 固定高度容器 | 可能遮挡内容 | | Margin挤压 | 简单页面布局 | 需要计算预留高度 | | Sticky定位 | 可滚动长表单 | 需要设置z-index | 💡 **优化建议**： 1. 为按钮容器添加背景色避免内容穿透 2. 移动端建议增加安全边距 ```css .button-group { padding-bottom: max(20px, env(safe-area-inset-bottom)); } ``` 3. 当表单超长时需要处理滚动问题 ```css .content { overflow-y: auto; max-height: 80vh; } ``` 推荐优先使用 **Flex弹性布局方案**，这是现代Web开发的标准做法，兼容性好（支持IE10+）且响应式表现最佳。如果遇到移动端键盘弹起遮挡按钮的情况，可以配合JavaScript监听窗口尺寸变化动态调整布局。