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>
posted on 2016-03-02 19:21 hduhdc 阅读(275) 评论(0) 收藏举报