jQuery bgiframe插件解决IE6 中 Select穿透div等层的问题

出现的问题描述：

如果网页上有浮动区块和下拉选择框重叠时，在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>

 

posted @ 2012-09-07 10:15  技术之家  阅读(412)  评论(0)  编辑  收藏  举报