margin-top在chrome中的有关问题 _HTML/CSS

margin-top在chrome中的问题
有没有人遇到过这样的问题:在chrome中2个div,一个嵌套另一个,被嵌套的那个层的margin-top不起作用,以下是我的测试仪代码,div2在Chrome浏览器中总是0px顶着div1,在IE7,firefox都正常,在Chrome就出现这样的问题,是Chrome的bug?怎么解决呢?

CSS code


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
<!--
    body{
        background-color:#AEB9F4;
    }
    #div1{
       width:602px;
       height:602px;
       margin:20px auto;
       background-color:#EDD923;
    }
    #div1 #div2{
       margin-top:20px;
       margin-right:20px;
       margin-bottom:20px;
       margin-left:20px;
       width:560px;
       height:560px;
       border:1px solid #000;
    }
-->
</style>   
</head>
<body>
   <div id="div1">
       <div id="div2"></div>
   </div>
</body>
</html>

------解决方案--------------------

CSS code


#div1{
  overflow:hidden;
  ...
}