解决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更高的优先级失效了。

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

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

Div被Select挡住解决办法

Div被Select挡住解决办法         Div下拉菜单被Select挡住的解决办法     onmouseover="this.style.height=100;" onmou...

解决DIV层被OBJECT、SELECT控件遮盖问题

浮动层或便捷菜单给用户操作极大的便利。使用IE6、7时,SELECT控件不能被DIV遮盖。OBJECT控件也不能被DIV遮盖。究其原因,大多表单控件或HTML控件是使用浏览器本身渲染绘制,因此层次可以...

关于select2的使用——解决点击瞬间下拉框消失的问题

这几天项目使用select2作为下拉框的控件。今天突然发现一个问题。在点击下拉框选择值的时候,下拉列表瞬间消失。拦也拦不住。只有瞬时将鼠标放到搜索框中或者是旁边的滚动条时,才会定住。怎么回事? 开始...
  • obrx163
  • obrx163
  • 2016年10月07日 14:57
  • 4274

select2与Bootstrap冲突解决

需要在bootstrap.css , select2.css 后加入下面的css /*** Select2 Plugin ***/ .form-control .select2-choice { ...

JQuery 增加、删除表格div层文本内容的JS代码 和仿select个性下拉框选择效果JS代码

早上重构一个机票预定页面,页面有个增加和删除乘机人的功能,所以就用JQuery 的 .remove() 属性和.append() 属性写了一个有增加、删除div层文本内容效果的JS代码,具体可运行下面...

Bootstrap Flat UI的select下拉框显示问题解决

bootstrap中文网(http://www.bootcss.com/)里推荐项目有Flat UI(http://www.bootcss.com/p/flat-ui/),非常漂亮,而且少有的竟然具有...
  • ouyida3
  • ouyida3
  • 2015年03月04日 13:16
  • 4012

JavaScript解决select下拉框中的内容太长显示不全的问题

JavaScript解决select下拉框中的内容太长显示不全的问题 1、说明      有些情况下,select下拉框的内容过长,导致部分看不见;      现在通过鼠标事件,让下拉框中的内容显...

使用<div><ul><li>模拟<select>下拉框

body {             padding: 0;             margin: 0;             font-size: 12px;         } ...

带滚动条的下拉框(select:用div模拟的)

每文一语:谋事在人,成事在天;小事人定,大事天定
  • ljj2312
  • ljj2312
  • 2013年10月13日 14:59
  • 3740
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:解决div层被select下拉框遮盖的问题
举报原因:
原因补充:

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