marin

firefox IE8\9 margin-top失效的原因与解决办法

孤者浪人 提交于 2019-12-04 19:35:23
“collapsing margins”(折叠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