首页 > 其他 > 详细

IE6下绝对定位元素和浮动元素并列绝对定位元素消失

时间:2016-03-02 19:50:23      阅读:213      评论:0      收藏:0      [点我收藏+]
 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>

 

IE6下绝对定位元素和浮动元素并列绝对定位元素消失

原文:http://www.cnblogs.com/hduhdc/p/5236183.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!