日期:2014-05-16  浏览次数:20737 次

关于 div 嵌套

我用chrome查看,<div class="list_manager_top5_in"> margin的上边5px,怎么在<div class="list_manager_top5_out">外边了?

不是应该包含在里边的吗,求解?


    <div class="list_manager_top5_out">
        <div class="list_manager_top5_in">
            <div >
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
            <div >
                <div></div>
                <div></div>
                <div></div>
            </div>
        </div>
    </div>



.list_manager_top5_out
{
    width:100%;
    clear:both;
    height: 100px; 
    background-color: #E4ECF5;
    }
    
 .list_manager_top5_in
{
    padding:5px 0 0 25px;
    margin:5px;
    clear:both;
    border:1px solid black;
    }   



------解决方案--------------------
估计是浏览器兼容性问题,我用谷歌和火狐测试的时候都是一样情况,IE就显示正常。
这个问题发生的原因是嵌套内的第一个块元素设置了margin-top;
这样这个块元素就会破开它的父元素(我也不知道是不是破开,反正意思你懂就行),这样就把它的父元素整个往下顶。
兼容性修补:使用父元素设置padding-top替代第一个子元素的margin-top;
就是这样:

    .list_manager_top5_out
   {
    width:100%;
    clear:both;
    height: 100px; 
    background-color: #E4ECF5;
    (padding-top:5px;)
    }
     
    .list_manager_top5_in
   {
    padding:5px 0 0 25px;
    margin:5px;
    clear:both;
    border:1px solid black;
    (margin-top:0;)
    }