读书人

IE6弹出层盖不住上拉菜单的解决方案 (

发布时间: 2012-10-29 10:03:53 作者: rapoo

IE6弹出层盖不住下拉菜单的解决方案 (转)
确实有效
使用iframe方式解决,如下例子

<!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>
<style type="text/css">
body {margin:0;padding:0;text-align:center;background-color:#eee;}??
#bd {margin:20px auto;padding:5px 20px 20px;border:1px solid #bbb;width:760px;background-color:#9CCE2E;}??
#popup {position:absolute;left: 443px;top:87px;}
.layer{width:300px;height:100px;padding:10px;border: 1px solid blue;background-color:#fff; }??
#popup iframe{display:none;_display:block;position:absolute;top:0;left:0px;z-index:-1;filter:mask();width:320px;height:120px;}
</style>
</head>
<body>
<div id="bd">
??? <h1>IE6下div遮盖select的解决方案</h1>
??? <div><label for="ddTest">Test</label>
??? ??? <select id="ddTest">
??? ??? ??? <option>…</option>
??? ??? ??? <option>pick me</option>
??? ??? </select>
??? </div>
</div>
<div id="popup">
<div class="layer">Is the select element poking through? </div>
<iframe></iframe>
</div>
</body>
</html>

注意绿色代码段。

工作原理:iframe能盖住select下拉菜单。
在弹出层增加iframe,并采用绝对定位,z-index:-1让iframe浮于弹出层下方;
filter:mask();让iframe透明~
display:none;_display:block;保证FF,IE7以上版本不受影响
width,height值确保iframe大小跟弹出层大小相同

注意事项:
弹出层 最外层区域只设置定位样式(position,left,top,z-index...),避免设置风格显示样式(特别注意边框) 因为iframe在其内,当边线刚好和select框重叠,边线将被select覆盖,影响显示效果

缺陷:需要根据弹出层大小不同,设置iframe大小,局限比较大。
当弹出层为半透明时,被覆盖的下拉菜单消失 为了您的安全,请只打开来源可靠的网址

打开网站????取消

来自: http://hi.baidu.com/tolinlin/blog/item/cc51d008d1d3e1d662d9863f.html

读书人网 >Web前端

热点推荐