日期:2014-05-17  浏览次数:20747 次

历上最变态的问题:浮动div遮不住展开的select下拉框选项,求大侠帮忙,在线等!
背景:
1.ie8环境下。
2.页面有下拉的导航条菜单,导航条下方有select下拉框。
3.下拉导航条的浮动div菜单后方也加了ifram(可以遮住select下拉框)

情况:点击select展开下拉框还没有选的时候,鼠标移动到上面的菜单,然后菜单下拉出来的div层(后方加了ifram)遮不住select下拉出来的选项。

------解决方案--------------------
看起来你的代码很乱,你的问题主要在布局方面,就算改好了,你拿过去,也未必能直接用上,还不如这样,在显示出菜单的时候,直接对select进行隐藏,过后再显示,这样反而对你更容易点
------解决方案--------------------
一般都是直接隐藏,然后显示。那些用frame遮的我也试过。很蛋疼的。
------解决方案--------------------
还有就是不一定非要用select下拉列表。像51job点个“选择地区”,直接弹出个div框体选择。
现在都是web2.0年代,点一下select拉出一整屏下拉列表,反而没用户体验。
------解决方案--------------------
只能把select用div模拟,select是窗体级元素,ie下解析渲染总是优先于div的
------解决方案--------------------
你还是用jquery吧。不然你会被兼容性搞到崩溃的。另外,下拉列表为何要判断mouseover??
------解决方案--------------------
个人还是建议你用个div什么的代替好了。或者不要用mouseover时间,而是用change事件。
------解决方案--------------------
<script type="text/javascript">
function suo(){
document.getElementById("menu").onmouseover = function(){
document.getElementById("menu2").style.display="block"
document.getElementById("menuifram").style.display="block"
var s=document.getElementsByName('D1')[0];
s.blur();
}
document.getElementById("menu").onmouseout= function(){
document.getElementById("menu2").style.display="none"
document.getElementById("menuifram").style.display="none"
}
}

</script>
------解决方案--------------------
探讨

代码只是还原这个实例,
布局也不是问题的关键,
关键是select这个层的显示级别太高,有什么办法让div盖住它?

试了火狐 谷歌浏览器都有这个问题,
看来主流浏览器都把当前正在操作的select下拉框的层级放到最高。

项目这样的页面情况很多,切菜单下面是通过ifram来调用不同的交易页面。
显示菜单的时候,隐藏下拉框这样的解决办法页面上难免会有没有被遮到的下拉框被隐藏,这样……

------解决方案--------------------
直接把不想看到的 display:none ... ^^ ...自己模拟个下来菜单 也不是很难吧...
------解决方案--------------------
只有一个办法,就是菜单显示时先隐藏select,菜单不显示时再显示select

不隐藏的话div根本不可能挡在select之前
------解决方案--------------------
z-index 怎么设置都没用
这种情况在IE中会出现的
我的解决办法就是把select直接给隐藏掉 等div消失的时候再把select显示回来
------解决方案--------------------
在ie6下的话 还是直接隐藏了下拉框比较容易吧
------解决方案--------------------
css样式:iframe{width:100%;height:500px;position:relative; margin-bottom:-500px;z-index:-1;filter:alpha(opacity=0);}

结构:
<div>
<!--[if IE 6]><iframe></iframe><![endif]-->
</div>
------解决方案--------------------
JQUERY 有个插件 bgiframe 专门解决这个问题,你可以看下 http://docs.jquery.com/Plugins/bgiframe
------解决方案--------------------
菜单效果能否用点击代替,不用悬停。
这样也利用了其blur的特性。不知客户能否接受。
------解决方案--------------------
浮动层要显示的时候,设置select的visibility:hidden
让它不可见,一些js框架也是这么搞的.