IE6でfloatした時、マージンが2倍になるバグを解消

IE6でfloatした要素のマージン値が2倍になるというバグがあります。
→マージンが2倍になるサンプル

float:left;を指定した要素にmargin-left、float:right;を指定した要素にmargin-rightを指定したらマージンの値が2倍になります。CSSを書いたことある人なら誰もが一度はハマったことのある有名なバグです。解決方法は簡単ですので、参考にしてください。

HTMLコード

 
<div class="box">
    <p class="L">boxA</p>
    <p class="L">boxB</p>
    <br class="clear" />
</div>
 

CSSコード

 
.box {
    margin: 0 0 40px 0;
    width: 300px;
    background-color: #6699FF;
}
 
    .box p.L {
        display: inline;　/*これを書くだけ*/
        float: left;
        width: 100px;
        height: 100px;
        margin: 10px 0 10px 10px;
        border: 1px solid #999999;
        background-color: #FFFFFF;
        
        /*中央寄せ*/
        line-height: 100px; /*垂直方向*/
        text-align: center; /*水平方向*/
    }
 
.clear {
    clear: both;
}
 

→マージンが2倍になるバグを解決したサンプル

floatする要素にdisplay: inline;を指定するだけで解決できます。
解決方法はググればたくさん出てくると思います。もし、前述の解決方法とは違うものを見つけたら教えてください。

blog comments powered by Disqus