今天遇到了一个IE6下的兼容性问题，虽然IE6已经不被大众所期待了，用户也已基本上消失的所剩无几，但是，作为一个问题而存在，我们有必要尝试的去研究一下bug的改善方法
对元素float-left，然后再对元素设置margin-left:40px，调试时候，鬼一般的出现了双倍的margin-left,变为80px（同样如果是float-right,margin-right亦是如此）
效果如下：
而在chrome，IE7+，均没有这个现象产生，现象如下：
后来，在样式中给元素添加了一个display:inline之后，就没有这个现象产生了，由于inline是使元素变成行内元素，那么什么是行内元素呢，其实就是内联元素，只是叫法不同，描述的都是一种状态，我们这么理解，然后当元素变为行内元素之后，会新开辟一个地方，而那个地方之前是没有元素的或者没有内联元素排在它的前面，那么这样，行内元素自然就会自动的浮动到我们父级元素的边框上，则双倍margin的现象就会消失，取而代之的是单倍margin正常显示，就这么理解。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Title</title>
<meta name="Keywords" content="">
<meta name="Description" content="">
<link rel="stylesheet" type="text/css" href="css/inside.css" />
</head>
<body>
<div class="content clearFix">
<div class="main margin">
</div>
<div class="main margin">
</div>
</div>
</body>
<script type="text/javascript">
</script>
</html>
.main{
margin-left: 40px;
background-color: #a847c3;
width: 80px;
height: 80px;
padding: 20px 20px;
border: 1px solid #2C2C2C;
float: left;
display: inline;
}
.content{
background-color: #2143fd;
margin: 100px auto;
width: 1000px;
height: 120px;
}
.clearFix:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden
}
原文：http://www.cnblogs.com/cyh2009/p/4366544.html