IE6下紧跟浮动后面的绝对定位消失bug

小剧客栈是我2012年3月28创建的个人博客，话说到今天也没几天。自认为做了一个很有难度的网站屁颠屁颠的逛来逛去，也没有用IEtest验证一下，回到家里我就向室友炫耀了。结果这一炫耀让我糗大了，在他那神奇的ie6我的博客右边的侧边栏不见了。

灰溜溜的我赶紧跑回去查找原因。在测试的时候发现，在firefox、ie9、ie8、ie7、opera下都可以正常显示，可是到了IE6的时候，所有页面中的这块侧边栏内容都不见了。

下面是简化后的出现问题的代码：

CSS

    .containter {margin: 0px auto; width: 960px; position: relative;}
    .main {width: 720px; float：left;}
    .sidebar {position: absolute; left: 708px; top: 0px; width: 252px; overflow: visible;}

HTML

<div class="containter">
    <div class="main">   ...   </div>
    <div class="sidebar">   ...   </div>
    <div class="clear"></div>
</div>

经过几番折腾，总算找出毛病了，原来是因为使用绝对定位的sidebar紧挨着的是main使用了浮动：float。

折腾又折腾，我发现既然sidebar是绝对定位，而且其高度肯定不比main的小。于是我就把“main”的float去掉了，问题解决了。再分析发现html中的class为clear的div也不需要，于是把它也消灭掉了。

至此我的问题解决掉了，我也从中又“学”到IE6的一大BUG。

下面是我搜索整理的这类情况的原因及解决办法：

IE6，浮动遇到绝对定位

本来两个不相同的东西，在IE6下硬是会擦出火花….

当一个元素内有一个块级元素并占据整行的时候，让它浮动，然后在它后面的行内元进行绝对定位（父级元素进行相对定位），在其他浏览器下都能正常显示，在IE6下会莫名其妙的消失。

尝试改变ul的长度，或者取消浮动都可以让IE6正常显示，莫非IE6下，绝对定位元素被覆盖掉了？但是在取消浮动下可以正常显示，那么在浮动下才会被覆盖？应该是ie6的bug。

再尝试下有没其他解决办法，在结果发现还是不行，试了下讨个块级元素，^.^哈哈，可以了，难道块级元素进行绝对定位就可以不平浮动了？尝试直接用块级元素或者把行内元素的display改为block，然后进行绝对定位，结果发现还是不行……………..- -#。

得出的结论:IE6下，绝对定位元素与浮动元素有重叠会导致绝对定位元素消失。

解决办法：

• 不相重叠。
• 改变其中一种效果。
• 在绝对定位元素外面套个块级元素，让他们直接接触。