IE6下著名的z-index bug
abcc项目实现这样一个功能:点击“上载查询”,弹出一个绝对定位的div(类似qq文件中转站的“上传文件”按钮),里面有上传按钮等,点击后div在最上层。即z-index为最大。在firefox下表现良好,在IE6下无论如何也盖不住select。墨墨说是IE下一个著名的bug,解决方法用一个iframe包住select。
以下是一个测试的静态html,为bug重现及及解决方法。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style type="text/css"> #d1,#d2 { width: 400px; height : 400px; } #d1 { position : absolute; top : 100px; background : red; z-index : 1; } #d2 { position : absolute; top : 150px; background : blue; z-index : 2; } </style> </head> <body> <div id="d1"> <form> <input type="text" name="username"/> </form> <p>中國</p> <form> <iframe style="z-index:1"><!-- 用iframe 解决此bug --> <select name="country"> <option value="1">china</option> <option value="2">japanese</option> <option value="1">U.S.A</option> </select> </iframe> </form> </div> <div id="d2">ddd</div> </body> </html>