RELATEED CONSULTING
相关咨询
选择下列产品马上在线沟通
服务时间：8:30-17:00
你可能遇到了下面的问题
关闭右侧工具栏

新闻中心

这里有您想知道的互联网营销解决方案
解决DIV在IE6下无法遮盖select

你对DIV浮层在IE6下无法遮盖select标签是否了解，这里和大家一起讨论一下，其实很早以前我就碰到过关于select元素的问题，但是为什么IE7和FF下DIV都可以遮住select标签，本文会为你揭秘。

栾城网站建设公司创新互联,栾城网站设计制作，有大型网站制作公司丰富经验。已为栾城上千提供企业网站建设服务。企业网站搭建\外贸网站建设要多少钱，请找那个售后服务好的栾城做网站的公司定做！

JavaScript巧解IE6 IE7 IE8兼容问题

这次讨论一下关于select元素的一个问题，其实很早以前我就碰到过关于select元素的问题，这次做网站又被问到同样的问题，就是：一般DIV浮层在IE6下无法遮盖selectaspxhome.com/search.asp?keyword=%b1%ea%c7%a9" target=_blank>标签，IE7和FF下DIV都可以遮住select标签。

列举个简单的实例阐述问题：

 
 
 
 
      
  
  
  
  1.   
  
  
  
  2.  
    3.   
  
  
  
  3. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    4.   
  
  
  
  4.  
    5.   
  
  
  
  5.  
    6.   
  
  
  
  6.  
    7.   
  
  
  
  7. 无标题文档 title> </li>  
  
  
  <li><style type="text/CSS"> </li>  
  
  
  <li>#warp { position:absolute; top:10px; left:26px; width:200px; height:200px;}  </li>  
  
  
  <li>.box { position:absolute; top:0; left:0; width:200px;   </li>  
  
  
  <li> </li>  
  
  
  <li>height:200px; background:#FDF3D9; border:1px solid #EEAC53}  </li>  
  
  
  <li> style> </li>  
  
  
  <li> head> </li>  
  
  
  <li> </li>  
  
  
  <li><body> </li>  
  
  
  <li><DIV id="warp"> </li>  
  
  
  <li>  <DIV class="box">dfsagdsa DIV> </li>  
  
  
  <li> DIV> </li>  
  
  
  <li><form id="form1" name="form1" method="post" action=""> </li>  
  
  
  <li><label> </li>  
  
  
  <li><select name="select" id="select"> </li>  
  
  
  <li>  <option>测试选项 option> </li>  
  
  
  <li>  <option>测试选项2 option> </li>  
  
  
  <li>  <option>测试选项3 option> </li>  
  
  
  <li> select> </li>  
  
  
  <li> label> </li>  
  
  
  <li> form> </li>  
  
  
  <li> body> </li>  
  
  
  <li> html> </li>  
  
  
  <li> </li> 
 
 
</ol></pre><p> [提示：你可先修改部分代码，再按运行]</p></p><p>DIV在IE6下无法遮盖select，原因是在IE6下，浏览器将select元素视为窗口级元素，这时DIV或者其它的普通元素无论z-index设置的多高都是无法遮住select元素的。#p#</p><p><strong>网上有两种解决办法：</strong></p><p>◆当浮动层DIV出现的时候，用JS将select隐藏，当浮动层DIV消失的时候select恢复出现。这种方法早期用的比较多，这里不多介绍。</p><p>◆ 用select同级别元素：iframe标签， 然后用实际的浮动层DIV和iframe放在一起。间接的使DIV遮住了select。</p><p>正确的代码：</p><pre>
 
 
 
 <ol>  
  
  
  <li></li>  
  
  
  <li> </li>  
  
  
  <li>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> </li>  
  
  
  <li><html xmlns="http://www.w3.org/1999/xhtml"> </li>  
  
  
  <li><head> </li>  
  
  
  <li><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> </li>  
  
  
  <li><title>无标题文档 title> </li>  
  
  
  <li><style type="text/CSS"> </li>  
  
  
  <li>#warp { position:absolute; top:10px; left:26px; width:200px; height:200px;}  </li>  
  
  
  <li>.box { position:absolute; top:0; left:0; width:200px;   </li>  
  
  
  <li> </li>  
  
  
  <li>height:200px; background:#FDF3D9; border:1px solid #EEAC53}  </li>  
  
  
  <li>.box iframe {width:400px; height:400px; z-index:-1}  </li>  
  
  
  <li> style> </li>  
  
  
  <li> head> </li>  
  
  
  <li> </li>  
  
  
  <li><body> </li>  
  
  
  <li><DIV id="warp"> </li>  
  
  
  <li>  <iframe frameborder="0"> iframe> </li>  
  
  
  <li>  <DIV class="box">dfsagdsa DIV> </li>  
  
  
  <li> DIV> </li>  
  
  
  <li><form id="form1" name="form1" method="post" action=""> </li>  
  
  
  <li><label> </li>  
  
  
  <li><select name="select" id="select"> </li>  
  
  
  <li>  <option>测试选项 option> </li>  
  
  
  <li>  <option>测试选项2 option> </li>  
  
  
  <li>  <option>测试选项3 option> </li>  
  
  
  <li> select> </li>  
  
  
  <li> label> </li>  
  
  
  <li> form> </li>  
  
  
  <li> body> </li>  
  
  
  <li> html> </li>  
  
  
  <li> </li>  
  
  
  <li> </li> 
 
 
</ol></pre><p>[提示：你可先修改部分代码，再按运行]</p></p><p>【编辑推荐】</p><ol><li>深入探究IE8和IE7的24个区别</li><li>探究IE8与IE7具体功能中窗口功能按钮的变化</li><li>剖析Margin和Padding属性中四个值的先后顺序及区别</li><li>九步轻松解决IE6的各种疑难杂症</li><li>技术前沿 一段JS代码轻松解决IE6-IE8的兼容性问题</li></ol>                                                <br>
                                                网页名称：解决DIV在IE6下无法遮盖select                                                <br>
                                                浏览路径：<a href="http://www.scpingwu.com/article/cdsehsj.html">http://www.scpingwu.com/article/cdsehsj.html</a>
                                            </div>
                                            <div class="hot_new">
                                                <div class="page_title clearfix">
                                                    <h3>其他资讯</h3>
                                                </div>
                                                <div class="news_list clearfix">
                                                    <ul>
                                                        <li>
                                                                <a href="/article/cdgjjos.html">香港服务器在视频流媒体中的表现如何？</a>
                                                            </li><li>
                                                                <a href="/article/cdgjjod.html">深入了解GP库在Linux系统中的应用(gp库linux)</a>
                                                            </li><li>
                                                                <a href="/article/cdgjgje.html">Linux命令行下实现快速后退（linux后退命令）</a>
                                                            </li><li>
                                                                <a href="/article/cdgjgps.html">主机后台访问问题-云服务器问题</a>
                                                            </li><li>
                                                                <a href="/article/cdgjghs.html">ps怎么用键盘移动,ps用键盘移动键就死机（ps键盘怎么移动图片）</a>
                                                            </li>                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 底部信息 -->
<div class="footer wow fadeInUp">
    <div class="rowFluid">
        <div class="span12">
            <div class="container">
                <div class="footer_content">
                    <div class="span4 col-xm-12">
                        <div class="footer_list">
                            <div class="span6">
                                <div class="bottom_logo"><img src="/Public/Home/images/ewm.jpg" alt="微信服务号二维码" /></div>
                            </div>
                            <div class="span6 col-xm-12">
                                <div class="quick_navigation">
                                    <div class="quick_navigation_title">快速导航</div>
                                    <ul>
                                        <li><a href="http://m.cdxwcx.com/guanghua.html" title="成都电信服务器托管" target="_blank">成都电信服务器托管</a></li><li><a href="http://m.cdcxhl.com/muban.html" title="成都模版网站建设" target="_blank">成都模版网站建设</a></li><li><a href="http://seo.cdkjz.cn/" title="成都seo优化" target="_blank">成都seo优化</a></li><li><a href="http://www.cdxwcx.cn/tuoguan/yaan.html" title="雅安服务器托管" target="_blank">雅安服务器托管</a></li><li><a href="http://www.cxhljz.cn/app/" title="Android开发" target="_blank">Android开发</a></li><li><a href="http://www.cyfdjwb.com/" title="四川柴油发电机保养" target="_blank">四川柴油发电机保养</a></li><li><a href="http://www.guanghanfdj.com/" title="广汉柴油发电机公司" target="_blank">广汉柴油发电机公司</a></li><li><a href="http://www.xaruijie.cn/" title="锦江区公司注册" target="_blank">锦江区公司注册</a></li><li><a href="http://www.mzwzsj.com/" title="梅州网站开发" target="_blank">梅州网站开发</a></li><li><a href="http://www.cdxwcx.cn/" title="成都做网站" target="_blank">成都做网站</a></li><li><a href="http://www.zgfdjwx.com/" title="zgfdjwx.com" target="_blank">zgfdjwx.com</a></li>                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="span4 col-xm-6 col-xs-12">
                        <div class="footer_list">
                            <div class="footer_link">
                                <div class="footer_link_title">友情链接</div>
                                <ul id="frientLinks">
                                    <a href="https://www.cdcxhl.com/" title="网站制作" target="_blank">网站制作</a>
                                    <a href="https://www.cdcxhl.com/" title="网站建设" target="_blank">网站建设</a>
                                    <a href="https://www.cdxwcx.com/tuiguang/" title="成都网络推广" target="_blank">网络推广</a>
                                    <a href="http://seo.cdkjz.cn/" title="成都网站推广" target="_blank">网站推广</a>
                                    <a href="https://www.cdcxhl.com/xiaochengx.html" title="成都微信小程序开发" target="_blank">小程序开发</a>
                                    <a href="https://www.cdcxhl.com/menu.html" title="创新互联网站栏目导航" target="_blank">网站导航</a>
                                </ul>
                                <div class="footer_link_title">网站建设</div>
                                <ul id="frientLinks">
                                    <li><a href="/">四川平武建站</a></li>
                                    <li><a href="https://www.cdcxhl.com/menu.html" title="创新互联网站栏目导航" target="_blank">网站导航</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="span4 col-xm-6 col-xs-12">
                        <div class="footer_list">
                            <div class="footer_cotact">
                                <div class="footer_cotact_title">联系方式</div>
                                <ul>
                                    <li><span class="footer_cotact_type">企业：</span><span class="footer_cotact_content">四川绵阳平武网站建设工作室</span></li>
                                    <li><span class="footer_cotact_type">地址：</span><span class="footer_cotact_content">成都市青羊区太升南路288号</span></li>
                                    <li><span class="footer_cotact_type">电话：</span><span class="footer_cotact_content"><a href="tel:18980820575" class="call">18980820575</a></span></li>
                                    <li><span class="footer_cotact_type">网址：</span><span class="footer_cotact_content"><a href="/" title="四川平武网站建设">www.scpingwu.com</a></span></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="copyright">
                <p>公司名称：四川绵阳平武网站建设工作室   联系电话：18980820575</p>
                <p><a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">网站备案号：蜀ICP备2024061352号-3</a></p>
                <p>四川平武建站 四川平武网站建设 四川平武网站设计 四川平武网站制作 <a href="http://www.cdxwcx.cn/" target="_blank">成都做网站</a></p>
            </div>
        </div>
    </div>
</div>
</body>
</html>
<script>
    $(".technical_support_box_z_info_box img").each(function(){
        var src = $(this).attr("src");    //获取图片地址
        var str=new RegExp("http");
        var result=str.test(src);
        if(result==false){
            var url = "https://www.cdcxhl.com"+src;    //绝对路径
            $(this).attr("src",url);
        }
    });
    window.onload=function(){
        document.oncontextmenu=function(){
            return false;
        }
    }
</script>