IE6的3像素bug新解决办法

3像素bug是IE6的一个著名的bug，当浮动元素与非浮动元素相邻时，这个3像素的Bug就会出现。看下面这个左列固定，右列液态的例子，css代码如下：

 

body { margin:0;}

#side { float: left; background:#99FF99; height: 300px; width: 120px;}

#main { background: #99FFFF; height: 300px;}

 

html代码如下：

 

<div id=”side”>此处显示 id “side” 的内容</div>

<div id=”main”>此处显示 id “main” 的内容</div>

 

网上的解决办法：

 

1、在#side上加上_margin-right:-3px;记住，前边加上一下划线，这样这个样式专门针对IE6生效。IE7和FF下还会正常显示。

原文参考自站长网http://www.software8.co/wzjs/cssdiv/2418.html

 

2、但上面方法不能通过W3C验证。当两列固定宽度时，最好把#main也固定宽度且向右浮动。

 

自己的解决办法，如有雷同纯属巧合。

 

可以把两个DIV换下位置：

 

<div id=”main”>此处显示 id “main” 的内容</div>

 

<div id=”side”>此处显示 id “side” 的内容</div>

 

然后CSS把side的向左浮动去除，给main加上个向右浮动。这样就不会有兼容问题了。