遇到过一个这样的问题:在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{
602px;
height:602px;
margin:20px auto;
background-color:#EDD923;
}
#div1 #div2{
margin-top:20px;
margin-right:20px;
margin-bottom:20px;
margin-left:20px;
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;
…
}