深入剖析Firefox下 margin-top失效原因与解决方案

开发 前端
CSS中的margin属性有很多值得学习的地方,那么你对Firefox浏览器下margin-top失效的原因与解决办法是否了解,这里和大家分享一下。

本文和大家重点讨论一下Firefox margin-top失效的原因与解决办法,在这个说明中,“collapsingmargins”(折叠margin)的意思是:2个或以上盒模型之间相邻的margin属性结合表示为一个单独的margin。

Firefox margin-top失效的原因与解决办法

最近发现好多用margin-top实现的,上边距效果一直没有,一直都不知道什么原因,今天偶然看到了,特分享给大家。在这个说明中,“collapsingmargins”(折叠margin)的意思是:2个或以上盒模型之间(关系可以是相邻或嵌套)相邻的margin属性(这之间不能有非空内容、padding区域、border边框或使用清除分离方法)结合表示为一个单独的margin。
在css2.1中,水平的margin不会被折叠。

垂直margin可能在一些盒模型中被折叠:

1、在常规文档流中,

2个或以上的块级盒模型相邻的垂直margin会被折叠。

最终的margin值计算方法如下:

a、全部都为正值,取***者;
b、不全是正值,则都取绝对值,然后用正值减去***值;
c、没有正值,则都取绝对值,然后用0减去***值。

注意:相邻的盒模型可能由DOM元素动态产生并没有相邻或继承关系。

2、相邻的和模型中,如果其中的一个是浮动的(floated),垂直margin不会被折叠,甚至一个浮动的盒模型和它的子元素之间也是这样。

3、设置了overflow属性的元素和它的子元素之间的margin不会被折叠(overflow取值为visible除外)。

4、设置了绝对定位(position:absolute)的盒模型,垂直margin不会被折叠,甚至和他们的子元素之间也是一样。

5、设置了display:inline-block的元素,垂直margin不会被折叠,甚至和他们的子元素之间也是一样。

6、如果一个盒模型的上下margin相邻,这时它的margin可能折叠覆盖(collapsethrough)它。在这种情况下,元素的位置(position)取决于它的相邻元素的margin是否被折叠。

a、如果元素的margin和它的父元素的margin-top折叠在一起,盒模型border-top的边界定义和它的父元素相同。
b、另外,任意元素的父元素不参与margin的折叠,或者说只有父元素的margin-bottom是参与计算的。如果元素的border-top非零,那么元素的border-top边界位置和原来一样。
一个应用了清除操作的元素的margin-top绝不会和它的块级父元素的margin-bottom折叠。

注意,那些已经被折叠覆盖的元素的位置对其他已经被折叠的元素的位置没有任何影响;只有在对这些元素的子元素布局时,border-top边界位置才是必需的。

7、根元素的垂直margin不会被折叠。

浮动的块级元素的margin-bottom总是与它后面的浮动块级兄弟元素(floatednextin-flowblock-levelsibling)的margin-top相邻,除非那个同级元素使用了清除操作。

浮动的块级元素的margin-top和它的***个浮动块级子元素(floatedfirstin-flowblock-levelchild)的margin-top相邻(如果该元素没有border-top,没有padding-top,并且子元素没有使用清除操作)。

浮动的块级元素的margin-bottom如果符合下列条件,那么它和它的***一个浮动块级子元素的margin-bottom相邻(如果该元素没有指定padding-bottom或border):
a、指定了height:auto
b、min-height小于元素的实际使用高度(height)
c、max-height大于元素的实际使用高度(height)

如果一个元素的min-height属性设置为0,那么它所拥有的margin是相邻的,并且它既没有border-top和border-bottom,也没有padding-top和padding-bottom,它的height属性可以是0或auto,它不能包含一个内联的盒模型(linebox),它所有的浮动子元素(如果有的话)的margin也都是相邻的。

当一个元素拥有的margin折叠了,并且它使用了清除操作,那么它的margin-top会和紧随其后的兄弟元素的相邻margin折叠,但结果是它的margin将无法和其块级父元素的margin-bottom折叠。
折叠操作是以padding、margin、border的值为基础的(即在浏览器解析所有这些值之后),折叠后的margin计算将覆盖已使用的不同margin的值。

代码如下: 

  1. <dividdivid="d0"style="background-color:#333333;height:500px;"> 
  2. <brstylebrstyle="line-height:0;"/> 
  3. //不加入br这一行,在Firefox中id1的margin-top:20px将会在d0上作用,
  4. 使d0上方与body间有20px的间距,d1与d0的上方没有间距,  
  5. 而IE内正常显示  
  6. <dividdivid="d1"style="background-color:#000000;margin-top:20px;height:100px;"></div> 
  7. <dividdivid="d2"style="background-color:#000000;margin-top:20px;height:100px;"></div> 
  8. </div> 

详细出处参考:http://www.jb51.net/article/16357.htm

【编辑推荐】

  1. DIV+CSS网页布局五大误区
  2. Firefox,IE8中margin-top属性bug解决方案
  3. CSS解析在IE与Firefox下的区别
  4. 探究采用DIV+CSS框架的利与弊
  5. DIV CSS网页布局需要掌握的八大技巧
责任编辑:佚名 来源: jb51.net
相关推荐

2010-08-26 13:54:33

Firefoxmargin-top

2010-08-31 09:19:46

margin-topFirefox

2010-08-30 16:53:14

FirefoxIE8margin-top

2010-09-08 09:28:33

CSSmargin-top

2010-08-31 09:13:00

margin-top

2010-09-13 17:15:59

margin-top

2010-08-25 10:46:53

margin-topCSS

2010-08-25 10:05:03

margin-top

2010-08-25 09:48:25

CSSmargin

2009-01-19 17:31:14

2010-08-27 14:35:37

IEFirefox兼容

2010-02-22 10:29:11

WCF上传文件

2010-08-26 14:00:28

CSSmargin

2010-08-31 10:17:52

CSSmargin边界叠加

2021-01-11 10:10:23

开发文本溢出开发技术

2010-08-26 08:45:32

margin:0pxa

2010-08-26 12:59:29

marginCSS

2018-10-12 14:34:13

2009-12-30 14:31:57

PPPoA体系

2010-09-06 13:51:38

CSS失效CSS
点赞
收藏

51CTO技术栈公众号