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