div+CSS布局时IE6的3px问题
IE6和更早的版本会在一个浮动的列(橙色)和一个非浮动的列(灰色)之间插入一个3px的空间。这个3px空间的准确位置取决于几个条件。
非浮动列没有固定的宽度或者高度。
非浮动列有固定的宽度或者高度。
当满足第1种条件时，非浮动列里会沿着浮动列有个3px的缩进，直到浮动终止(如下图，注意在灰色内部的左边有3px的空间)。
如果要修复这个BUG，要完成两个步骤。
第一步，给非浮动列一个高度(height: 1px)。当完成这个步骤时，就满足了上面所说的第2个条件，非浮动列有固定的宽度或高度。这时3px的空间会出现在浮动列与非浮动列的中间，而不是非浮动列的里面(如下图，注意在橙色与灰色的交界处有3px的空间)。有的时候因为这3px的原因，会把灰色的列挤到橙色的列下面。
第二步，调整非浮动列的margin-left为0，然后调整浮动列的margin-right为-3px，将非浮动列拉回正确的位置。
经过上面两步的操作，这两个列在IE6下就能正确的显示了。然后用CSS hack的方法管理针对IE6的样式，确保所以浏览器显示正常。
完整的代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<style type="text/css">
body
{
margin: 0;
padding: 0;
}
h1
{
margin: 0;
padding: 0;
}
#top
{
background-color: red;
}
#content
{
width: 760px;
margin: 0 auto;
}
#left
{
float: left;
width: 200px;
background-color: orange;
}
#right
{
margin-left: 200px;
background-color: #E7E7E7;
}
</style>
<!--[if lte IE 6]>
<style type="text/css">
#left
{
margin-right: -3px;
}
#right
{
height: 1px;
margin-left: 0px;
}
</style>
<![endif]-->
<body>
<div id="content">
<div id="top">
<h1>
Top Banner</h1>
</div>
<div id="left">
<div>
left menu</div>
<div>
left menu</div>
<div>
left menu</div>
<div>
left menu</div>
<div>
left menu</div>
<div>
left menu</div>
<div>
left menu</div>
<div>
left menu</div>
<div>
left menu</div>
<div>
left menu</div>
<div>
left menu</div>
<div>
left menu</div>
<div>
left menu</div>
<div>
left menu</div>
</div>
<div id="right">
<div>
right content</div>
<div>
right content</div>
<div>
right content</div>
<div>
right content</div>
<div>
right content</div>
<div>
right content</div>
<div>
right content</div>
<div>
right content</div>
<div>
right content</div>
<div>
right content</div>
<div>
right content</div>
<div>
right content</div>
<div>
right content</div>
<div>
right content</div>
<div>
right content</div>
<div>
right content</div>
<div>
right content</div>
<div>
right content</div>
<div>
right content</div>
<div>
right content</div>
<div>
right content</div>
<div>
right content</div>
<div>
right content</div>
<div>
right content</div>
<div>
right content</div>
<div>
right content</div>
</div>
</div>
</body>
</html>
