zoukankan      html  css  js  c++  java
  • 解决IE6下select显示在弹出框上问题

    利用定位position:absolute;z-index:1;和iframe[z-index:-1]来解决此问题,最好根据需要加上: border='0' frameborder='0' scrolling='no'来去除滚动条和边框,需要使用jquery1.7.2.js。

    解决方法:

    1.将iframe放到弹出层的最外层里的最后面,也可以是里面,定义z-index:-1;。

       1:   <div  class="left_main_menu"> 
       2:          <div class="left_menu_left">
       3:              <asp:Literal ID="Literal1" runat="server"></asp:Literal> 
       4:          </div>
       5:          <div class="left_menu_right" title="点击隐藏菜单">
       6:             <div class="left_menu_rightbody">隐藏菜单</div> 
       7:             <iframe style="position: absolute; left: -800px; top: -600px; z-index: -1;  2048px; height: 1800px; *position: absolute; opacity: 0.3; filter: alpha(opacity=10);"></iframe>
       8:           </div>
       9:      </div>

    css

    <style type="text/css">
    .left_main_menu{180px;height:auto;position:fixed;left:0;top:40px;border:1px solid #ccc;box-shadow:0px 0px 30px rgb(170,170,170);padding:2px;background-color:#0099CC;overflow:hidden;z-index:999;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;_position:absolute;}
    .left_main_menu .left_menu_left{163px;height:100%;overflow:auto;overflow-x:hidden;float:left;background:#F5FAF1;}
    .left_main_menu .left_menu_right{15px;height:100%;float:right;background:#0099cc;text-align:center;cursor:pointer;color:#FFFFFF;font-weight:bold;}
    .left_main_menu .left_menu_right:hover{background:#F5FAF1;color:#0099CC;}
    .left_main_top a,.left_main_se a{height:28px;100%;text-align:center;line-height:28px; display:inline-block; color:#0099CC; cursor:pointer; text-decoration:none;_padding-top:8px; }
    .left_main_top a{font-size:14px;font-weight:bold;background:#F0F0F0; border-top:1px solid #0099CC; border-bottom:1px solid #0099CC;}
    .left_main_se a{ font-size:12px; font-weight:lighter;background:#F5FAF1;border-top:1px solid #0099CC;}
    .left_main_top a:hover,.left_main_topcurrent a{background:#D0D0D0;cursor:pointer;height:28px;100%;text-align:center;line-height:28px; display:inline-block;text-decoration:none;}
    .left_main_se a:hover,.left_main_securrent a{background:#D0D0D0;cursor:pointer;height:28px;100%;text-align:center;line-height:28px; display:inline-block;text-decoration:none;}
    .left_main_lcon{height:24px;24px;vertical-align:middle;line-height:24px;}
    .left_main_menu ul{margin:0px;padding:0px;}
    </style>

    2.在需要的层后面增加一个层来隐藏select,建议样式选择一样,设置z-index:999,弹出层:z-index:1000。

    <div class="global-topwhs" id="topcss" style="z-index:1000">
        <div class="glo-m">
            <div class="glo-left">
                <div class="glo-left-font">
                     <label>信息化系统欢迎您</label>
                </div>
     
            </div>
            <div class="glo-right">
                 <label class='glo-tui'><a href="javascript:void(0)" id="signoutsystem">退出</a></label> 
            </div>
        </div>
    </div>
    <div class="global-topwhs"  style="z-index:999">
    <iframe style="position: absolute; left: -800px; top: -600px; z-index: -1;  2048px; height: 1800px; *position: absolute; opacity: 0.3; filter: alpha(opacity=10);"></iframe>
    </div>

    3.第二种方式的整合体,iframe这里只对ie6有隐藏的目的,所以应该对于ie6生成,其它浏览器不生成ifram.js,哪里要用放到哪里。

    //说明:
    /****************************************************************************/
    /**引用此文件的位置ie6下后面追加一个iframe,需要定义iframe的高宽左上四个参数**/
    /****************************************************************************/
    $(function () {
        if ($.browser.msie && parseInt($.browser.version) <= 6) {
            //是ie6,写iframe 
            $("script").each(function () {
                if ($(this).attr('src') == '/js/ifram.js' && !$(this).next().is("iframe[tag=ie6]")) {
                    var height = $(this).attr('h');
                    var width = $(this).attr('w');
                    var left = $(this).attr('l');
                    var top = $(this).attr('t');
                    var tt = $(this).attr('tt');
                    if (tt == 'tt') {
                        $(this).after("<div tag=ie6 class='global-topwhs' style='z-index:999;background:red;'><iframe border='0' frameborder='0' scrolling='no' style='position: absolute; left:" + left + "; top: " + top + "; z-index: -1;  " + width + "; height: " + height + "; *position: absolute; opacity: 0.3; filter: alpha(opacity=10);'></iframe></div>");
                    } else {
                        $(this).after("<iframe tag=ie6 border='0' frameborder='0' scrolling='no' style='position: absolute; left:" + left + "; top: " + top + "; z-index: -1;  " + width + "; height: " + height + "; *position: absolute; opacity: 0.3; filter: alpha(opacity=10);'></iframe>");
                    }
                }
            });
        }
    });
    理论上通过生成一个背后的div可以达到将iframe放到弹出层后的目的,但在实际过程中,ie6下有bug,看不到嵌套的div,所以还是将div放到页面,设置隐藏,根据需要,在此显示即可。
  • 相关阅读:
    16款值得一用的iPhone线框图模板 (PSD & Sketch)
    设计神器
    {CF812}
    hiho1080(多标记线段树)
    {容斥原理}
    {dp入门}
    {AC自动机}
    CF807
    Trie树
    杂记
  • 原文地址:https://www.cnblogs.com/maomao999/p/3668390.html
Copyright © 2011-2022 走看看