135-1821-9792

如何解决DIV在IE6下无法遮盖select

这期内容当中小编将会给大家带来有关如何解决DIV在IE6下无法遮盖select,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。

成都创新互联公司是一家专业提供金山企业网站建设,专注与成都网站建设、做网站、H5响应式网站、小程序制作等业务。10年已为金山众多企业、政府机构等服务。创新互联专业网站设计公司优惠进行中。

你对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标签。

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

 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">    无标题文档title> <style type="text/CSS"> #warp { position:absolute; top:10px; left:26px; width:200px; height:200px;}  .box { position:absolute; top:0; left:0; width:200px;    height:200px; background:#FDF3D9; border:1px solid #EEAC53}  style> head>  <body> <DIV id="warp">   <DIV class="box">dfsagdsaDIV> DIV> <form id="form1" name="form1" method="post" action=""> <label> <select name="select" id="select">   <option>测试选项option>   <option>测试选项2option>   <option>测试选项3option> select> label> form> body> html></pre><p>[提示:你可先修改部分代码,再按运行]</p><p><img src="/upload/otherpica43/487135.jpg" alt="如何解决DIV在IE6下无法遮盖select"></p><p>DIV在IE6下无法遮盖select,原因是在IE6下,浏览器将select元素视为窗口级元素,这时DIV或者其它的普通元素无论z-index设置的多高都是无法遮住select元素的。</p><p><strong>网上有两种解决办法:</strong></p><p>◆当浮动层DIV出现的时候,用JS将select隐藏,当浮动层DIV消失的时候select恢复出现。这种方法早期用的比较多,这里不多介绍。</p><p>◆ 用select同级别元素:iframe标签,<iframe frameborder="0"></iframe> 然后用实际的浮动层DIV和iframe放在一起。间接的使DIV遮住了select。</p><p>正确的代码:</p><pre> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档title> <style type="text/CSS"> #warp { position:absolute; top:10px; left:26px; width:200px; height:200px;}  .box { position:absolute; top:0; left:0; width:200px;    height:200px; background:#FDF3D9; border:1px solid #EEAC53}  .box iframe {width:400px; height:400px; z-index:-1}  style> head>  <body> <DIV id="warp">   <iframe frameborder="0">iframe>   <DIV class="box">dfsagdsaDIV> DIV> <form id="form1" name="form1" method="post" action=""> <label> <select name="select" id="select">   <option>测试选项option>   <option>测试选项2option>   <option>测试选项3option> select> label> form> body> html></pre><p>[提示:你可先修改部分代码,再按运行]</p><p><img src="/upload/otherpica43/487136.jpg" alt="如何解决DIV在IE6下无法遮盖select"></p><p>上述就是小编为大家分享的如何解决DIV在IE6下无法遮盖select了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注创新互联行业资讯频道。</p>            
            
                        <br>
            文章标题:如何解决DIV在IE6下无法遮盖select            <br>
            文章URL:<a href="http://kswsj.com/article/igdjoc.html">http://kswsj.com/article/igdjoc.html</a>
        </div>
    </div>
    <div class="other">
        <h3>其他资讯</h3>
        <ul>
            <li>
                    <a href="/article/pshhcs.html">node中事件机制的原理是什么</a>
                </li><li>
                    <a href="/article/pshhpg.html">如何使用二进制方式搭建K8S高可用集群</a>
                </li><li>
                    <a href="/article/pshhhh.html">由[交换两个变量的值问题]理解程序的时空复杂度</a>
                </li><li>
                    <a href="/article/pshhhp.html">怎么利用HTML5实现不刷新文件上传</a>
                </li><li>
                    <a href="/article/pshhpe.html">vimfindbash文件系统</a>
                </li>        </ul>
    </div>
</div>
<!-- end #bd -->
<div class="c"></div>
<!-- begin #fd -->
<div id="fd" class="index-fd pr">
    <div class="map-bg3"></div>
    <div class="wp">
        <div class="fd-top">
            <dl>
                <dt>关于我们</dt>
                <dd>
                    <ul class="ul-fd">
                        <li><a href="http://www.kswsj.com/about#whous">我们是谁</a></li>
                        <li><a href="http://www.kswsj.com/about#ourcus">我们服务的客户</a></li>
                        <li><a href="http://www.kswsj.com/about#ourteam">我们的团队</a></li>
                    </ul>
                </dd>
            </dl>
            <dl>
                <dt>我们的服务</dt>
                <dd>
                    <ul class="ul-fd">
                        <li><a href="http://www.kswsj.com/service#webbuit">网站建设</a></li>
                        <li><a href="http://www.kswsj.com/service#weiweb">H5响应式 交互网站</a></li>
                        <li><a href="http://www.kswsj.com/service#webmobel">移动端 & 微网站定制</a></li>
                        <li><a href="http://www.kswsj.com/service#servweb">服务流程</a></li>
                        <li><a href="http://www.kswsj.com/service#solution">行业解决方案</a></li>
                    </ul>
                </dd>
            </dl>
            <dl>
                <dt>网站建设案例</dt>
                <dd>
                    <ul class="ul-fd">

                        <li><a href="http://www.kswsj.com/case/">公司集团</a></li>

                        <li><a href="http://www.kswsj.com/case/">数码电子科技</a></li>

                        <li><a href="http://www.kswsj.com/case/">建筑与设计</a></li>

                        <li><a href="http://www.kswsj.com/case/">安防门禁</a></li>

                        <li><a href="http://www.kswsj.com/case/">管理咨询美容</a></li>

                        <li><a href="http://www.kswsj.com/case/">外贸行业</a></li>

                    </ul>
                </dd>
            </dl>
            <dl>
                <dt>新闻动态</dt>
                <dd>
                    <ul class="ul-fd">

                        <li><a href="/news/2.html">成都网站建设</a></li><li><a href="/news/3.html">成都网站制作</a></li><li><a href="/news/4.html">成都网站设计</a></li>
                    </ul>
                </dd>
            </dl>
            <dl>
                <dt>联系我们</dt>
                <dd class="pr">
                    <p><a href="http://www.kswsj.com/news/" class="weixin"></a><a href="http://www.kswsj.com/news/" class="sina"></a><span class="weixin-pic"><img src="/Public/Home/pic/ewm.jpg"></span></p>
                    <p><b class="tel">135-1821-9792</b></p>
                    <h5>公司服务热线</h5>
                </dd>
            </dl>
        </div>
        <div class="link">
            友情链接:
            <a href="http://m.cdxwcx.com/weixin.html" title="成都微信开发" target="_blank">成都微信开发</a>   <a href="https://www.cdxwcx.com/city/suining/" title="遂宁网站建设" target="_blank">遂宁网站建设</a>   <a href="http://www.jyruizhi.cn/" title="无纺布袋定制" target="_blank">无纺布袋定制</a>   <a href="https://www.cdxwcx.com/city/qionglai/" title="邛崃做网站" target="_blank">邛崃做网站</a>   <a href="https://www.cdcxhl.com/mianfei/jianshe/chengdu.html" title="成都免费网站建设" target="_blank">成都免费网站建设</a>   <a href="http://www.scyarui.cn/" title="青羊区雕琢时光" target="_blank">青羊区雕琢时光</a>   <a href="http://m.cdcxhl.cn/mobile/
" title="移动网站建设" target="_blank">移动网站建设</a>   <a href="http://www.gddkgd.com/" title="图文广告制作" target="_blank">图文广告制作</a>   <a href="http://www.cqcxhl.com/" title="重庆网站制作" target="_blank">重庆网站制作</a>   <a href="http://www.ljwzsj.com/" title="ljwzsj.com" target="_blank">ljwzsj.com</a>           </div>
    </div>
    <div class="fd-copy">
        <div class="wp">
            <p><span style="color:#CCCCCC;">Copyright © 2009-2022 www.kswsj.com 成都快上网科技有限公司 版权所有</span> <a href="http://beian.miit.gov.cn/" target="_blank" rel="nofollow" style="color:#CCCCCC;">蜀ICP备19037934号</a></p>
        </div>
    </div>
</div>
<div class="side">
    <ul>
        <li><a href="http://wpa.qq.com/msgrd?v=3&uin=631063699&site=qq&menu=yes" target="_blank">
            <div class="sidebox"><img src="/Public/Home/pic/side_icon02.png">在线咨询</div>
        </a></li>
        <li><a href="http://wpa.qq.com/msgrd?v=3&uin=631063699&site=qq&menu=yes" target="_blank">
            <div class="sidebox"><img src="/Public/Home/pic/side_icon01.png">在线咨询</div>
        </a></li>
        <li><a href="tel:135-1821-9792">
            <div class="sidebox"><img src="/Public/Home/pic/side_icon03.png"><span style="font-size:14px">135-1821-9792</span></div>
        </a></li>
    </ul>
</div>
<div class="side2">
    <ul>
        <li><a href="http://www.kswsj.com/news/"><img src="/Public/Home/pic/r_icon1.png" alt="成都网站建设"></a>
            <div class="weixin"><em></em><img src="/Public/Home/pic/ewm.jpg" alt="成都网站建设"></div>
        </li>
        <li><a href="javascript:goTop();" class="sidetop"><img src="/Public/Home/pic/r_icon2.png"></a></li>
    </ul>
</div>
<div class="fot">
    <ul>
        <li>
            <a href="https://p.qiao.baidu.com/cps/mobileChat?siteId=11284691&userId=6256368&type=1&reqParam=%20{%22from%22:0,%22sessionid%22:%22%22,%22siteId%22:%2211284691%22,%22tid%22:%22-1%22,%22userId%22:%226256368%22,%22ttype%22:1,%22siteConfig%22:%20{%22eid%22:%226256368%22,%22queuing%22:%22%22,%22siteToken%22:%226ce441ff9e2d6bedbdfc2a4138de449e%22,%22userId%22:%226256368%22,%22isGray%22:%22false%22,%22wsUrl%22:%22wss://p.qiao.baidu.com/cps3/websocket%22,%22likeVersion%22:%22generic%22,%22siteId%22:%2211284691%22,%22online%22:%22true%22,%22webRoot%22:%22//p.qiao.baidu.com/cps3/%22,%22bid%22:%22160142915792139572%22,%22isSmallFlow%22:0,%22isPreonline%22:0,%22invited%22:0%20},%22config%22:%20{%22themeColor%22:%224d74fa%22%20}%20}&appId=&referer=&iswechat=0&expectWaiter=-1&openid=null&otherParam=null&telephone=null&speedLogId=null&eid=null&siteToken=6ce441ff9e2d6bedbdfc2a4138de449e" target="_blank">
                <img src="/Public/Home/pic/fot1.png" alt="">
                <p>在线咨询</p>
            </a>
        </li>
        <li>
            <a href="tel:18980820575" target="_blank">
                <img src="/Public/Home/pic/fot2.png" alt="">
                <p>拨打电话</p>
            </a>
        </li>
    </ul>
</div>
<script type="text/javascript" src="/Public/Home/pic/jquery.js"></script>
<script type="text/javascript" src="/Public/Home/pic/lib.js"></script>
</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>