margin-top在chrome中的兼容问题

遇到过一个这样的问题:在chrome中2个div,一个嵌套另一个,被嵌套的那个层的margin-top不起作用,以下是我的测试仪代码,div2在Chrome浏览器中总是0px顶着div1,在IE7,firefox都正常,在Chrome就出现这样的问题,是Chrome的bug?应该怎么解决呢?不知道是不是chrome的兼容问题。
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>

要解决这个问题，需要给div1设置一个属性，如下的代码细节：
CSS code：

#div1{
overflow:hidden;
…
}

posted @ 2013-03-15 11:16  Akishimo  阅读(587)  评论(0)    收藏  举报