×

定义了浮动元素后margin-bottom失效的解决办法

admin admin 发表于2016-09-12 23:12:52 浏览1866 评论4

4人参与发表评论

虽然IE6慢慢的退出市场了,但是还是有必要了解一些兼容问题,让自己的知识有一个更好的沉淀。margin-bottom的bug是容器div的 'zoom:1' 触发了 hasLayout,其内部浮动子元素也参与到了容器的高度计算之中。在 IE6 IE7 IE8(Q)中,容器div的 'zoom:1' 触发了 hasLayout,其内部浮动子元素也参与到了容器的高度计算之中。但是浮动子元素设置的 'margin-bottom' 消失;在其他浏览器中,容器的 'overflow:hidden' 创建了新的 Block Formatting Context ,同样,其内部浮动子元素也参与到了容器的高度计算之中。浮动子元素的四个方向的 margin 均正常。例子:第一个div子元素设置了底部的margin值,在清除浮动之后无效

<meta charset="UTF-8">
<title>浮动元素的影响</title>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    .con-float-box {
        width: 600px;
        border: 1px solid #f00;
    }
    .con-float-box div {
        float: left;
        width: 198px;
        height: 98px;
        margin: 20px 0;
        border: 1px solid #00f;
    }
    .box-pos {
        width: 600px;
        height: 100px;
        margin-top: 10px;
        border: 1px solid #000;
        background: #ccf;
    }
    .clearfix:before, .clearfix:after {
        content:"\200B";
        display: block;
        height: 0;
        overflow: hidden;
    }
    .clearfix:after {
        clear: both;
    }
</style>
 
 
 
<div class="con-float-box clearfix">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
</div>
<div class="box-pos">为第一个div设置了清除浮动的类clearfix,进行了相应的处理,此时,在谷歌浏览器当中正常,但是在IE6,依旧不正常,第7和第8个块底部的margin没有生效。</div>


解决方案为:容器显式地设置高度。若容器高度不定,则要避免在触发了 hasLayout 的容器内的浮动子元素上设置 'margin-bottom' 特性,可以通过为容器设置 'padding-bottom' 达到相似的效果。只要不同时触发父元素hasLayout、子元素左浮动、左浮动子元素拥有非零的 margin-bottom 值,这三个条件中任意一项,均可解决此问题。

    以上就是今天E良师益友网对定义了浮动元素后margin-bottom失效的解决办法详解了,如果还有不明白的同学,不妨去看看本站提供的HTML视频教程哦!


摘录自:http://www.lai18.com/content/6550500.html

群贤毕至

访客