历上最变态的问题:浮动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>
------解决方案--------------------
------解决方案--------------------直接把不想看到的 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框架也是这么搞的.