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>