• ie6绝对定位层元素消失


    在ie6中,relative块元素内,absolute块元素的上一个元素如果是浮动的话,absolute块元素将消失掉。具体触发原因是:

    绝对定位层前面一个元素是浮动层;大元素内的总宽度被所有子元素占满了,即子元素宽度排列已经塞不下任何一像素了。代码如下:

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <style>
    *{ margin:0; padding:0; font-size:14px; line-height:20px;}
    .main{ position:relative; 300px; height:300px; overflow:hidden; background:black;}
    .a{ float:left; 290px; height:100px; background:aqua;}
    .b{ float:left; 10px; height:50px; overflow:hidden; background:blue;}
    .absolute{ position:absolute; top:10px; left:10px; 100px; height:100px; background:red;}
    </style>
    </head>
    <body>
    <div class="main">
        <div class="a"></div>
        <div class="b"></div>
        <div class="absolute"></div>
    </div>
    </body>
    </html>

    解决办法是:

    1)仅增加.absolute元素clear:both属性

    2)仅增加绝对定位层(.absolute)和前一个浮动层(.b)之间加入空div标签,即

    <div class="b"></div>
    <div></div>
    <div class="absolute"></div>

    3)仅调整.a+.b的width总值小于父项.main的宽度

    以上三种方案都不需要累加,单一步骤即可实现ie6下absolute绝对定位元素的出现

  • 相关阅读:
    find命令进阶(二):对找到的文件执行操作exec
    find命令进阶用法(一)
    find按照文件大小查找
    find命令查找目录
    什么是ppa
    Linux进程管理命令
    [HDOJ4135]Co-prime
    [HDOJ5391]Zball in Tina Town
    [模拟]位运算实现四则运算
    [HDOJ1233]还是畅通工程
  • 原文地址:https://www.cnblogs.com/archrjoe/p/2789627.html
Copyright © 2020-2023  润新知