兩個div,父div有padding值,子div有margin-top值,瀏覽器在解析實際父子位置關係時,他們之間的距離是父padding+子margin-top。現在把父div設置固定高度,並有意讓父padding+子margin-top的值大於父div的高度。這時,chrome,firefox,opera中效果都會把子div”擠出“。唯獨IE,居然敢擅自增加父div的高度(父div高度是設置好的),用來容納子div。以下是代碼和效果圖:
<html>
<head>
<style>
.div1{
background: #feb;
font-family: Arial,Helvetica,sans-serif;
font-size: 12px;
text-align: center;
padding: 10px;
border:2px solid #000;
height: 40px;
}
.div2{
background: #a2d2ff;
margin-top: 30px;
border:2px dashed #004993;
padding: 15px;
}
</style>
<head>
<body>
<div class="div1">父div
<div class="div2">子div</div>
</div>
</body>
</html>
效果圖:
chrome,firefox,opera
IE