• 悲催的IE6 七宗罪大吐槽(带解决方法)第二部分


    三、position:fixed无效

    今天在IE6上遇到一个bug,本来想做一个消息提示框,让他在页面右上角停留一段时间后消失,这段时间内提示框随着页面的下拉一直出现在浏览器可见区的顶部,于是我用到了css的一个属性position:fixed,但遗憾的是在IE6下这个属性不起作用,悲剧的IE6,于是便找解决方案,现把最佳的解决方案拿出来与大家分享,或许不久的将来你能用上。

    1、要实现的效果如下图:


    这时弹出提示在浏览器最右上角可见区 


    这时浏览器向下滚动了一下,但要让弹出层保持在浏览器最右上角可见区 

    2、兼容的解决方案代码如下:

    css代码如下

    .loading_tip {

        position: fixed;

        _position: absolute;

        top: 10px;

        right: 5px;

        _bottom: auto;

        _top: expression(eval(document.documentElement.scrollTop+10));

        background-color: #F0F0F0;

        padding: 5px;

        border: #6FD65Csolid1px;

        z-index: 9999999;

    }

       

    /** 防止在拖动过程中出现抖动现象 **/

    *html {

        background-image: url(about:blank);

        background-attachment: fixed;

    }

       

    .content{

        height:1500px;

    }

    html代码如下

    <divclass="loading_tip">这是fixed的区域,休想让消失</div>

    <divclass="content">这是好多内容的区域,我要往下拖动了,上面的fixed的区域想跟我一起下来吗?</div>

    这下好了,终于能在IE6上实现fixed效果了

    四、div无法遮盖select问题

    今天来看看IE6下的这个bug,绝对定位的div无法遮盖select,本来是想做一个弹出的div来作提示框,可是到了IE6下,无意中发现页面上的一个select无法被弹出的div遮住,好像是selectdiv划破了一样,具体效果如下图所示。

    这是正常的图,上面的div把下面的select遮住了

       

    这是IE6下不正常的效果,上面div不能把下面的select遮住

       

    那么如何解决这个bug呢,解决该bug的方法如下:

    1、将select放到iframe里面,div 无法覆盖select,但是iframe 可以覆盖select,而div可以覆盖iframe,所以解决办法就是用Z轴高度更高的Iframe元素,包裹或覆盖住下拉列表框控件,使其回到正常的Z轴高度上来,但每个select都加太烦了,不推荐

    2、在需要遮盖select的那个div放入一个空的iframe,这样就可以针对性的解决问题了,简单,值得推荐

    下面就第2种方法贴出css代码如下:

    <style type="text/css">

    #pop{

         300px;

        height:100px;

        padding:10px;

        position:absolute;

        top:0;

        border:1pxsolidblue;

        background-color:#6666CC;

        filter:alpha(opacity=70);

        opacity:0.6;

    }

    #sect{

        400px;

        margin-top:60px

    }

    #pop iframe{

        display:none;

        display:block;

        position:absolute;

        top:0;

        left:0;

        z-index:-1;

        3000px;

        height:3000px;

    }

    </style>

    html代码如下:

    <divid="pop">这个是绝对定位的div,看看它有没有把select遮住<!--[if lte IE 6.5]><iframe></iframe>

    <![endif]--></div>

    <selectid="sect">

        <optionvalue="1">我是select,你能把我遮住吗</option> 

    <optionvalue="2">我是select,你能把我遮住吗</option>

    </select>

  • 相关阅读:
    [luogu 5163] WD与地图
    AtCoder Grand Contest 013&014
    [NOI2018] 冒泡排序
    [省选联考 2020 A 卷] 魔法商店
    [省选集训2022] 模拟赛11
    [学习笔记] 随机化贪心
    [省选集训2022] 模拟赛12
    JVM内存结构、Java对象模型和Java内存模型
    代码优化:当复制大量数据时,使用System.arraycopy()命令
    多线程之线程优先级
  • 原文地址:https://www.cnblogs.com/ranran/p/IE6_Bugs_2.html
Copyright © 2020-2023  润新知