我们专注孝感网站设计 孝感网站制作 孝感网站建设
成都网站建设公司服务热线：18982081108

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后，网站问题一站解决

解决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.ytofo.com/article/cdsehsj.html">http://www.ytofo.com/article/cdsehsj.html</a>
        </div>
    </div>
    <div class="other">
        <h3>其他资讯</h3>
        <ul>
            <li>
                    <a href="/article/codpops.html">用python怎么判断一个字数？（python怎么读取文件字符数）</a>
                </li><li>
                    <a href="/article/codpcoo.html">Linux系统中LVM如何实现动态磁盘扩容(linux中lvm用法)</a>
                </li><li>
                    <a href="/article/codpcoc.html">用qt怎么编译一个c程序？（qt运行文件,用qt运行我已有的cpp文件）</a>
                </li><li>
                    <a href="/article/codpcos.html">mysql如何设置编码？注册mysql服务命令行</a>
                </li><li>
                    <a href="/article/codpdgg.html">不带www域名不可访问为什么？（不能访问对应的三级域名-虚拟主机/数据库问题）</a>
                </li>        </ul>
    </div>
</div>
<footer>
    <div class="message">
        <div class="mess container">
            <p>免费获取网站设计制作与品牌网站建设策划方案报价</p>
            <span>网站设计 + 品牌建站，策划方案 + 精准报价，现在免费领！品牌要升级，官网先发力！免费领取网站设计制作方案 + 精准报价，专业团队帮你落地</span>
            <form action="">
                <input type="text" class="ipt1" placeholder="联系人">
                <input type="text" class="ipt2" placeholder="联系电话">
                <textarea name="" id=""  placeholder="内容描述：描述您的需求，如网站、微信、电商、APP等。"></textarea>
                <a href="">提交需求</a>
            </form>
        </div>
    </div>
    <div class="footA">
        <div class="footAs container">
            <ul>
                <h3>联系我们</h3>
                <b>18980820575</b>
                <li>手机：13518219792</li>
                <li>地址：湖北孝感市大悟城关镇鄂北物流城13栋125号</li>
                <li class="hr1"></li>
                <li>24小时服务热线：18982081108</li>
            </ul>
            <ul>
                <h3>网站建设服务</h3>
                <li>网页设计</li>
                <li>网站制作</li>
                <li>网站开发</li>
            </ul>
            <ul>
                <h3>网站推广服务</h3>
                <li>营销网站建设</li>
                <li>百度快速排名</li>
                <li>整站网站推广</li>
            </ul>
            <ul>
                <h3>网站运维服务</h3>
                <li>基础维护</li>
                <li>网站改版</li>
                <li>网站维护</li>
            </ul>
            <ul>
                <h3>FOLLOW US</h3>
                <li class="hr2"></li>
                <li>
                    <dd class="fl"><img src="/Public/Home/img/ewm.png" alt=""><p>微信二维码</p></dd>
                    <dd class="fr"><img src="/Public/Home/img/ewm.png" alt=""><p>微信二维码</p></dd>
                </li>
            </ul>
        </div>
        <div class="link container">
            友情链接：
            <a href="http://www.cdfuwuqi.com/host/mianbeian/" title="免备案虚拟主机" target="_blank">免备案虚拟主机</a>   <a href="http://m.cdcxhl.cn/H5/
" title="H5建站" target="_blank">H5建站</a>   <a href="https://www.cdcxhl.com/yunying.html" title="成都网站托管" target="_blank">成都网站托管</a>   <a href="http://www.klmpz.com/" title="资阳网站设计" target="_blank">资阳网站设计</a>   <a href="http://mc.scmwjz.com/" title="不锈钢防护栏" target="_blank">不锈钢防护栏</a>   <a href="http://www.cdganxi.com/" title="成都企业画册设计" target="_blank">成都企业画册设计</a>   <a href="http://www.jkwzsj.com/" title="成都做网站" target="_blank">成都做网站</a>   <a href="https://www.cdxwcx.com/" title="网站制作" target="_blank">网站制作</a>   <a href="http://www.xhgfhy.com/
" title="成都防护栏" target="_blank">成都防护栏</a>   <a href="https://www.cdxwcx.com/400/" title="成都400电话办理" target="_blank">成都400电话办理</a>           </div>
    </div>
    <div class="footB">
        <div class="container">
            <div class="fl">
                Copyright © 2025  湖北孝感网站建设公司     湖北孝感网站建设公司-选我们！湖北专业的孝感网站制作公司！
            </div>
            <div class="fr">
                All Rights Reserved 版权所有 <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">鄂ICP备2025125038号-8</a>
            </div>
        </div>
    </div>
</footer>
</body>
</html>
<script>
    $(".con 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>