放大时，div如何相互重叠？

Question

  

可能重复：
  When zooming in, why does the footer overlap its preceding content

这是html：

    <div id = "mainWrapperDiv"> 
    <div id = "mainDiv">
        <div class = "test1div"> testing </div> 
    </div>
</div>
<div id = "footerDiv">
</div>

继承人css：

*
{
    padding:            0px;
    margin:             0px;
}

body, html
{
    height:             100%
}

div
{
    border:             1px solid;
    overflow:           hidden;
} 

#mainWrapperDiv 
{
    min-height:         100%;  
    height:             100%; 
    margin-bottom:      -200px;
}  

#mainDiv  
{

    border:             1px solid;
    margin:             0px auto 0px auto; 
    width:              1000px;
    background:         lightgreen;  
    overflow:           hidden;
}

#mainDiv div.test1div
{ 
    width:              20em;
    height:             20em;
    float:              left;
} 

#mainDiv:after
{
    content:            ".";
    height:             0px;
    display:            block;
    clear:              both;
    visibility:         visible;
}

#footerDiv 
{
    height:             200px;
    width:              100%;
    clear:              both;
    background:         lightblue;
    overflow:           hidden;
}