margin 相关 bug 系列

原文地址：margin系列之bug巡演 by @doyoe

IE6浮动双倍margin bug

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

触发方式

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

来看看详细的代码吧：

HTML

<div id="demo">
    <p>IE6下浮动方向上的margin值将会双倍于其指定值</p>
</div>

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

<div id="demo">
    <p>第一个float:left</p>
    <p>第二个float:left</p>
    <p>第三个float:left</p>
</div>

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

<div id="demo">
    <p class="a">1 float:left</p>
    <p class="b">2 float:left</p>
    <p class="c">3 float:right</p>
    <p class="d">4 float:right</p>
</div>

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;
}