网创优客建站品牌官网
为成都网站建设公司企业提供高品质网站建设
热线:028-86922220
成都专业网站建设公司

定制建站费用3500元

符合中小企业对网站设计、功能常规化式的企业展示型网站建设

成都品牌网站建设

品牌网站建设费用6000元

本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...

成都商城网站建设

商城网站建设费用8000元

商城网站建设因基本功能的需求不同费用上面也有很大的差别...

成都微信网站建设

手机微信网站建站3000元

手机微信网站开发、微信官网、微信商城网站...

建站知识

当前位置:首页 > 建站知识

如何解决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>
            文章路径:<a href="http://bjjierui.cn/article/igdjoc.html">http://bjjierui.cn/article/igdjoc.html</a>
        </div>
    </div>
    <div class="other">
        <h3>其他资讯</h3>
        <ul>
            <li>
                    <a href="/article/jishcs.html">php如何强制转码</a>
                </li><li>
                    <a href="/article/jishei.html">nginx如何让浏览器强制跳转HTTPS访问</a>
                </li><li>
                    <a href="/article/jishej.html">如何安装CentOS系统上搭建Git版本控制服务器</a>
                </li><li>
                    <a href="/article/jishod.html">实现jQuery无冲突模式的方法</a>
                </li><li>
                    <a href="/article/jishgi.html">Go语言怎么将整型转化为浮点型</a>
                </li>        </ul>
    </div>
</div>
<ul class="kf">
    <li class="kf1"><span class="tela">建站热线:<a href="tel:13518219792" target="_blank">13518219792</a></span></li>
    <li class="kf11"><span  class="weixin"><img src="/Public/Home/images/weixin.jpg" alt="网站建设微信咨询"><br>
    微信扫一扫在线咨询</span> </li>
    <li class="kf5">QQ客服: <a href="http://wpa.qq.com/msgrd?v=3&uin=631063699&site=qq&menu=yes" class="on2" target="_blank" rel="nofollow"><img src="/Public/Home/images/qq.gif" alt="建站业务咨询" title="建站业务咨询"></a> <a href="http://wpa.qq.com/msgrd?v=3&uin=631063699&site=qq&menu=yes" class="on2" target="_blank" rel="nofollow"><img src="/Public/Home/images/qq.gif" alt="网站设计咨询" title="网站设计咨询"></a></li>
    <li class="kf2"><a href="http://www.bjjierui.cn/cases/" target="_blank">案 例</a></li>
    <li class="kf4"><a href="http://www.bjjierui.cn/" target="_blank">价 格</a></li>
    <li class="kf6" title="返回顶部"></li>
</ul>
<div class="footer">
    <div class="footer_2">
        <p>Copyright © 2012-2020 <strong>网创优客信息咨询</strong> 版权所有  蜀ICP备2023009085号-7<br />
            手机:13518219792 QQ:631063699 地址:成都市青羊区锣锅巷31号  邮编:610000 Email:wh@cdxwcx.com<br/>

            成都网络公司-网创优客建站品牌专注<a href="http://www.bjjierui.cn/">成都网站建设</a>、<a href="http://www.bjjierui.cn/">成都网站设计</a>服务,为成都公司建设高品质的网站</p>
    </div>
</div>
<script type="text/javascript">
    $(document).ready(function(){

        $(".kf6").click(function() {
            $('body,html').animate({
                scrollTop : 0
            }, 500);
            return false;
        });

    })
    var bodyhe=$("body").height();
    var winhe=330;
    var bodyf=bodyhe-winhe;
    var bodyft=bodyhe-365;
    window.onscroll = function(){
        var t = document.documentElement.scrollTop || document.body.scrollTop;
        if(t>200){
            $(".kf .kf6").stop().animate({opacity:'1'},200);
        }else{$(".kf .kf6").stop().animate({opacity:'0'},200);}
        if(t>1 && t<winhe){

            $(".header").addClass('no');
            $(".header").removeClass('notwo');

        }else if(t>winhe){
            $(".header").removeClass('no');
            $(".header").addClass('notwo');

        }else{
            $(".header").removeClass('no');
        }
    }
</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>