解决div层被select下拉框遮盖的问题

原创 2005年04月27日 18:19:00

在IE里,层DIV被下拉框SELECT遮盖,这是IE的bug之一,原因在于select的优先级别比div高。因此无论如何用css属性z-index设置都没用。

所以,解决的办法有两种

  • 在显示div的时候隐藏所有select
  • 让div里的内容比select的优先级还要高

第一种方法显然比较麻烦,特别是当select比较多且位置不固定的时候,很容易将不该隐藏的也隐藏了。

第二钟办法更好一些。常用的优先级比select高的HTML控件有object和iframe,我选用了iframe比较好。

原理就是在div种加入一个iframe,然后把需要显示的内容write到iframe的body中。

参考代码如下:

var oIframe = document.createElement("<iframe name=/"oIframeFilter/" frameborder=/"0/"></iframe>")
if (oDivFilter.children.length != 0) oDivFilter.removeChild(oDivFilter.children(0));
oDivFilter.appendChild(oIframe);
window.frames[oIframe.name].document.write("<link rel=/"stylesheet/" href=/"/style/css.css/" type=/"text/css/">");
sBody = "<table><tr><td>哈哈哈哈</td></tr></table>";
window.frames[oIframe.name].document.write(sBody);

此外,还需要注意iframe的属性allowTransparency就不能再用了,因为透明就让iframe更高的优先级失效了。

Position为absolute的div或dropdown menu在设置了overflow的div中显示不完全(cropped)

Two methods to solve: 两种方法 1. 假设你要将div4(absolute postion) 根据div3定位,但是显示区域会超过div1。而div1却有overflow,若...
  • mizaoyu
  • mizaoyu
  • 2016年09月01日 12:57
  • 833

导航下拉菜单被遮住或显示不全问题所在和解决办法

导航下拉菜单被banner遮住/显示不全,这种问题是老生常谈了,经常有新手会问,有些人做了2、3年的还会经常犯错,而且好多人还以为是js问题,其实这是基本的css知识。我觉得还是有必要写一遍文章解释给...
  • FireBird_one
  • FireBird_one
  • 2017年12月21日 16:08
  • 135

Bootstrap的下拉菜单被挡住

Bootstrap的下拉菜单被挡住 代码 div class="range"> div class="dropdown" style="float:right"> ...
  • JaRiS_jade
  • JaRiS_jade
  • 2018年01月17日 13:19
  • 92

div被select下拉框挡住了--5种解决方法

在IE中,select属于window类型控件,它会“挡住”所有非window类型控件可以这么理解,div这样的组件是在浏览器客户区使用代码“渲染”的,他们被渲染在客户区的绘画表面上,而select是...
  • xinxin19881112
  • xinxin19881112
  • 2009年12月31日 23:01
  • 8202

前端框架layui下拉框被遮挡问题

在使用layui做下拉框选项的时候发现有时候下拉框会被遮挡或者根本就出不来的现象 于是看了一下审查元素发现原本的div只有这么大 仔细找了一下发现是layui自带的class属...
  • weixin_39973810
  • weixin_39973810
  • 2017年12月15日 19:18
  • 647

div被select遮挡

div被选择框select遮挡住的5种解决方法一现象:在调整页面样式时,经常发现浮动层的div被select遮挡。效果如下:二.原因在IE中,select属于window类型控件,它会“挡住”所有非w...
  • lyq123333321
  • lyq123333321
  • 2011年04月22日 10:28
  • 1845

使用bootstrap-select遇到的坑

项目需要,需要一个bootstrap框架下的下拉多选控件,比较主流的都会去用bootstrap-select实现,但是当使用ajax请求到数据添加到下拉框时怎么也不显示,查找原因后是得有两步refre...
  • qq_14926159
  • qq_14926159
  • 2016年11月16日 16:43
  • 14841

解决div层被select下拉框遮盖的问题

在IE里,层DIV被下拉框SELECT遮盖,这是IE的bug之一,原因在于select的优先级别比div高。因此无论如何用css属性z-index设置都没用。所以,解决的办法有两种在显示div的时候隐...
  • URL
  • URL
  • 2005年04月27日 18:19
  • 5208

bootstrap关于日期控件被模态框遮盖的BUG修复

bootstrap关于日期控件被模态框遮盖的BUG修复在使用bootstrap-datepicker.js插件的时候,由于是在模态框中填写日期值,而模态框的值把日期控件遮盖在下面了,导致无法填写日期值...
  • u010999240
  • u010999240
  • 2015年03月28日 15:40
  • 2558

div层被flash遮挡的解决办法

flash的wmode属性: "Window " 在 Web 页上用影片自己的矩形窗口来播放应用程序,并且始终位于最顶层。 "Opaque " 显示页面上位于它后面的内容。 "Transparen...
  • spring5530
  • spring5530
  • 2014年06月24日 16:10
  • 1219
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:解决div层被select下拉框遮盖的问题
举报原因:
原因补充:

(最多只允许输入30个字)