出现的问题描述:
如果网页上有浮动区块和下拉选择框重叠时,在IE6会看到下来单总是把浮动区块盖住,无论怎么调整z-index都是没有用的,像是这样(若您不是使用IE6浏览本页,则应该看到的是正常的浮动区在块上面)。
解决方案:
使用jQuery.bgiframe.min.js插件。该插件会在区块的下面再插入一段Iframe,这样就可以把下拉选择单遮住。并且让浮动区块正常显示。
简单的实例代码如下:
View Code
<!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> <title>下拉菜单-竖向</title> <script type="text/javascript" src="http://www.cnblogs.com/Scripts/jquery.js"></script> <script type="text/javascript" src="../JS/jquery.bgiframe.min.js"></script> <style type="text/css"> .select { z-index:1; } .floatBox { width:100px; height:50px; border:solid 1px red; z-index:2; background:lightyellow; position:relative; top:-35px; left:40px; } </style> </head> <body> <select class="select"> <option>This is a test!</option> </select> <div id="floatingBox" class="floatBox"> 欢迎来到bgiframe,这是一个浮动区块。 </div> <script type="text/javascript"> $(document).ready(function () { $('#floatingBox').bgiframe(); }); </script> </body> </html>