精美而实用的网站,关注web编程技术、网站运营、SEO推广,让您轻松愉快的学习

在IE6中,如果你设置了浮动,并给浮动元素设置了margin的话,你会发现margin的距离双倍了,下面青岛星网给大家讲下:IE6浮动元素margin加倍解决方法。

范例HTML代码

<h2>bug</h2>
    <p>第一个左浮动元素的margin-left加倍</p>
    <div class="m-demo">
        <div class="itm itm-left">1</div>
        <div class="itm itm-left">2</div>
        <div class="itm itm-left">3</div>
    </div>
    <p>第一个右浮动元素的margin-right加倍</p>
    <div class="m-demo">
        <div class="itm itm-right">1</div>
        <div class="itm itm-right">2</div>
        <div class="itm itm-right">3</div>
    </div>
    <h2>fix</h2>
    <p>因为内联元素没有此问题,所以通过设置display:inline解决</p>
    <div class="m-demo m-demo-fix">
        <div class="itm itm-left">1</div>
        <div class="itm itm-left">2</div>
        <div class="itm itm-left">3</div>
    </div> 
    <div class="m-demo m-demo-fix">
        <div class="itm itm-right">1</div>
        <div class="itm itm-right">2</div>
        <div class="itm itm-right">3</div>
    </div> 

CSS解决方法

/* IE6中浮动双边距 */
.m-demo{width:400px;height:20px;margin:0 0 10px;background:#ddd;}
.m-demo .itm{width:20px;height:20px;line-height:20px;text-align:center;color:#fff;background:#ff0097;}
.m-demo .itm-left{float:left;margin-left:20px;}
.m-demo .itm-right{float:right;margin-right:20px;}
.m-demo-fix .itm{display:inline;}
Tags:IE 浮动 margin