網站排版中DIV+CSS中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.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/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,以下屬性可以實現