原文地址： by

IE6浮动双倍margin bug

这当是IE6最为经典的bug之一。

触发方式

• 元素被设置浮动
• 元素在与浮动一致的方向上设置margin值

来看看详细的代码吧：

HTML

     
    
      
IE6下浮动方向上的margin值将会双倍于其指定值
     

CSS

#demo {
       overflow: hidden;    width: 400px;    margin: auto;    padding: 10px 0;    background: #ddd;}#demo p {
       float: left;    margin-left: 10px;    background: #aaa;}

double margin 并不会发生在所有的浮动元素上，同个包含块内，在相同的浮动方向上，它只发生在第一个浮动元素上。

HTML

     
    
      
第一个float:left
    
      
第二个float:left
    
      
第三个float:left
     

CSS

#demo {
       overflow: hidden;    width: 400px;    margin: auto;    padding: 10px 0;    background: #ddd;}#demo p {
       float: left;    margin-left: 10px;    background: #aaa;}

 

double margin只发生在float:left时？

HTML

     
    
      
1 float:left
    
      
2 float:left
    
      
3 float:right
    
      
4 float:right
     

CSS

#demo {
       overflow: hidden;    width: 400px;    margin: auto;    padding: 10px 0;    background: #ddd;}#demo .a, #demo .b{
       float:left;    margin-left:10px;}#demo .c, #demo .d{
       float:right;    margin-right:10px;}

是的，你可能想到了，第一个左浮动元素和第一个右浮动元素都将会出现 double margin

fix IE6浮动双倍margin bug

方法一：

_margin-left

#demo p {
       float: left;    margin-left: 10px;    _margin-left: 5px;    background: #aaa;}

方法二：

display:inline

#demo p {
       float: left;    margin-left: 10px;    /*_margin-left: 5px;*/    _display: inline;    background: #aaa;}