Subscribe to 无限摄影News FeedSubscribe to 无限摄影Comments

margin边界叠加问题以及ie和Firefox的不同解释

十一月 19, 2008 by zhanbin  
分类：web标准

评论

使用google搜索margin 边界叠加边界的时候，搜索出来的每一篇文章详细的说明了 margin边界叠加的原理。但是在某些浏览器和一起其他style存在的时候边界的实际叠加情况并不按照边界叠加原理展现。

在ie6，ie7 中，如果一个容器

在ie6，ie7 中，如果一个容器<div class="f" />包含了一个子容器<div class="s" />的时候有以下几种情况：

?View Code HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

< !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 style="padding:20px; margin:0; font-size:14px; font-family:Verdana, Geneva, sans-serif; background-color:#000">
<div style=" width:300px; padding:10px;">
<div class="f" style="background-color:#efefef;">
<div class="s" style="margin-top:20px; border:1px solid #f00;">情况1
.f{ background-color:#efefef;}
.s{ margin-top:20px; border:1px solid #f00;}
 
ie和Firefox解释相同，margin叠加了，并叠加到了父容器上。 父容器使用子容器的margin-top，就像是父容器有一个margin-top一样。
</div>
</div>
</div>
<div style=" width:300px; padding:10px;">
<div class="f" style="background-color:#efefef; height:250px;">
<div class="s" style="margin-top:20px; border:1px solid #f00;">情况2
.f{ background-color:#efefef;height:250px;}
.s{ margin-top:20px; border:1px solid #f00;}
 
当父容器的高度被指定后，ie和 Firefox的表现就变得不一样了，Firefox的表现和情况1 一样。而在ie中，边界没有叠加，margin-top作用到了子容器.s中，在子容器和父容器之间出现了一个margin
</div>
</div>
</div>
<div style=" width:300px; padding:10px;">
<div class="f" style="background-color:#efefef; height:250px; overflow:hidden">
<div class="s" style="margin-top:20px; border:1px solid #f00;">情况3
.f{ background-color:#efefef; height:250px; overflow:hidden}
.s{ margin-top:20px; border:1px solid #f00;}
 
当在父容器添加overflow:hidden 时，ie和Firefox的表现又一致了，和之前ie的表现一样，都是边界不叠加。
</div>
</div>
</div>
<div style=" width:300px; padding:10px;">
<div class="f" style="background-color:#efefef; border-top:1px solid #f00">
<div class="s" style="margin-top:20px; border:1px solid #f00;">情况4
.f{ background-color:#efefef; height:250px; overflow:hidden}
.s{ margin-top:20px; border:1px solid #f00;}
 
如果父容器包含border和padding属性时，边界不叠加,且不会将子容器的边界添加到父容器上。因为两个容器的边界不相连接。
</div>
</div>
</div>
<div style=" width:300px; padding:10px;">
<div class="f" style="background-color:#efefef; padding-top:1px ">
<div class="s" style="margin-top:20px; border:1px solid #f00;">情况5
.f{ background-color:#efefef; height:250px; overflow:hidden}
.s{ margin-top:20px; border:1px solid #f00;}
 
如果父容器包含border和padding属性时，边界不叠加,且不会将子容器的边界添加到父容器上。因为两个容器的边界不相连接。
</div>
</div>
</div>
 
</body>
</html>

示例：margin边界叠加

相关内容

标签：,

评论



让我知道你的想法：(支持Gravatar头像服务)