使用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大小,局限比较大。 |