margin-top在chrome中的兼容问题

最新推荐文章于 2021-08-03 19:47:56 发布

转载最新推荐文章于 2021-08-03 19:47:56 发布 · 376 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Akishimo/archive/2013/03/15/2961009.html

文章标签：

#xhtml

本文探讨了在Chrome浏览器中遇到的一个布局问题，即子div的margin-top属性在父div内不起作用的现象。通过修改父div的CSS属性为overflow:hidden，成功解决了这一兼容性问题。

遇到过一个这样的问题:在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;
…
}

转载于:https://www.cnblogs.com/Akishimo/archive/2013/03/15/2961009.html