zoukankan      html  css  js  c++  java
  • IE6下绝对定位元素和浮动元素并列绝对定位元素消失

     1 <!DOCTYPE html>
     2 <html>
     3     <head>
     4         <meta charset="utf-8">
     5         <title></title>
     6         <style>
     7             .box{
     8                 width: 200px;
     9                 height: 200px;
    10                 border: 1px solid black;
    11                 position: relative;
    12             }
    13             .item{
    14                 width: 150px;
    15                 height: 150px;
    16                 background-color: red;
    17                 float: left;
    18                 margin-left: 50px;<!--浮动元素有一个margin需要加上display:inline否则在ie6会出现双边距-->
    19                 *display: inline;
    20             }
    21             .box span{
    22                 width: 50px;
    23                 height: 50px;
    24                 background-color: yellow;
    25                 position: absolute;
    26                 right: -10px;
    27                 top:-10px;
    28                 
    29             }
    30         </style>
    31         <!--
    32             解决方案:
    33                 在IE6的情况下......浮动元素和绝对定位元素是同级的话定位元素就会消失。所以咱们只要让他们俩不处于同级就可以避免这个bug。譬如37行代码
    34         -->
    35     </head>
    36     <body>
    37         <div class="box">
    38             <div class="item"></div>
    39             <p>
    40                 <span></span>
    41             </p>
    42         </div>
    43     </body>
    44 </html>
  • 相关阅读:
    C语言I博客作业09
    C语言I博客作业08
    第十四周助教总结
    C语言I博客作业07
    第十三周助教总结
    C语言I博客作业06
    第十二周助教总结
    学期总结
    C语言I博客作业09
    C语言I博客作业08
  • 原文地址:https://www.cnblogs.com/hduhdc/p/5236183.html
Copyright © 2011-2022 走看看