前段时间弄了个页面，使用两列布局，但在IE6下这两列就是水火不相容，怎么都不靠近，两列之间有着三像素的距离，但在IE7下是靠拢的
在网上如果搜索能搜索到一堆IE6BUG的文章，但很多提到的是HACK的东西，在实际应用中估计很少能用到，也能找到很多关于IE6 3PX BUG
这类的文章，我这里想说的是怎么解决IE6 3PX BUG和兼容的问题：
如果你用下面这段代码在IE6下你就能发现问题了：
<head runat="server">
<title>无标题页</title>
<style type="text/css" media="all">
.leftContent
{
float: left;
width: 220px;
height:1000px;
background:#ccc;
}
.rightContent
{
width: auto;
padding: 0px;
height: 1000px;
background:#254da4;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="leftContent">
</div>
<div class="rightContent">
</div>
</form>
</body>
</html>
运行上面的代码就能发现IE6 的 3PX BUG的问题，我当时考虑的是如何解决在IE6和IE7下都能正常的显示效果
所以在写的时候是针对IE7的代码，在给代码打上IE6的补丁，这样就能兼容IE6和IE7了，这里没有考虑其它的浏览器
代码如下：
<head runat="server">
<title>无标题页</title>
<style type="text/css" media="all">
.leftContent
{
float: left;
width: 220px;
height:1000px;
background:#ccc;
}
* html .leftContent
{
margin-right:-3px;
}
.rightContent
{
width: auto;
padding: 0px;
height: 1000px;
background:#254da4;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="leftContent">
</div>
<div class="rightContent">
</div>
</form>
</body>
</html>
