ie6 select 遮挡 div 边框

ie6中的bug,select 是窗口级控件，无论怎么设置z-index的级别都不起作用，最常用的方法是就是在div中加上一个iframe，但是div Class样式属性中含有overflow会遮挡div的边框

View Code 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
<html debug="true">
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
        <title>jQuery bgiframe Visual Test</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
        <script type="text/javascript" src="jquery.bgiframe.js"></script>
        
        <script type="text/javascript" charset="utf-8">
            $(function() {
                $('#box2').bgiframe();
                $('#box3').bgiframe({top: -5, left: -5});
            });
        </script>
        
        <style type="text/css" media="screen">
                #wrapper { position: absolute; width: 100%; font: 12px Arial; }
                form { position: absolute; top: 0; left: 0; width: 100%; }
                    select {  width: 100%; margin: 0 0 2px;  color: #ccc; }
                
                .box { position: relative; z-index: 2; float: left; margin: 5px; border: 5px solid #666; padding: 5px; width: 250px; height: 100px; color: #000; background-color: #999; }
                    dl { margin: 0; padding: 0; }
                        dt { float: left; margin: 0; padding: 0; width: 50px; }
                        dd { margin: 0; padding: 0; }
            
        </style>
    </head>
    <body>
        <h1>jQuery bgiframe - Visual Test</h1>
        <div id="wrapper">
            <form action="#" method="get" accept-charset="utf-8">
                <select name="test"><option>Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing</option></select>
                <select name="test"><option>Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing</option></select>
                <select name="test"><option>Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing</option></select>
                
            </form>
        
            <div id="box1" class="box">nothing</div>
            <div id="box2" class="box" style="overflow:hidden">
                <dl>box2 <font color="red">有overflow属性</font>
                    <dt>top:</dt>
                    <dd>'auto'</dd>
                    
                    <dt>left:</dt>
                    <dd>'auto'</dd>
                    
                    <dt>width:</dt>
                    <dd>'auto'</dd>
                    
                    <dt>height:</dt>
                    <dd>'auto'</dd>
                </dl>
            </div>
            <div id="box3" class="box">
                <dl>box3
                    <dt>top:</dt>
                    <dd>0</dd>
                    
                    <dt>left:</dt>
                    <dd>0</dd>
                    
                    <dt>width:</dt>
                    <dd>'auto'</dd>
                    
                    <dt>height:</dt>
                    <dd>'auto'</dd>
                </dl>
            </div>
        
        </div>
    </body>
</html>

 

 

posted @ 2012-11-20 19:05  夏夜晴空  阅读(180)  评论(0)  编辑  收藏  举报