嵌套div中margin-top转移问题的解决办法 在这两个浏览器中,有两个嵌套关系的div,如果外层div的父元素padding值为0,那么内层div的margin-top或者margin-bottom的值会“转移”给外层div。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www./1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> </head> <body> <div style="background-color:#FF0000;width:300px; height:100px">上部层</div> <div style="background-color:#009900; width:300px; height:300px;overflow:hidden "> <!--父层--> </div> </body> </html> 原因:盒子没有获得 haslayout 解决办法: 1、在父层div加上:overflow:hidden; 2、把margin-top外边距改成padding-top内边距 ; 3、父元素产生边距重叠的边有不为 0 的 padding 或宽度不为 0 且 style 不为 none 的 border。 4、让父元素生成一个 block formating context,以下属性可以实现 |
|