IE7、IE8、ff下的margin-top问题 折叠margin

简述

简述

在IE7、IE8、ff等旧版本浏览器中，margin-top属性会存在所谓“折叠margin”的问题，即在某些情况下，相邻的两个元素的margin-top会“折叠”为一条，导致元素间的间距不如预期。

解决方案

1.添加padding-top

给父元素添加一个padding-top的属性值，可以有效避免margin-top的折叠问题。这是由于元素的padding属性相对于元素内容定位，因此添加padding-top实质上是在子元素前增加了一段空白的空间来防止margin的折叠，从而使得元素间距符合预期。

示例代码：

.parent {
  padding-top: 1px;
}

.child {
  margin-top: 20px;
}

2.使用伪元素

使用伪元素来给父元素加上一个空的内容块也可以有效避免margin-top的折叠问题。这个方法的原理与第一种方法类似，都是在父元素和子元素间添加一段内容区来避免margin-top折叠导致的间距问题。

示例代码：

.parent:before {
  content: " ";
  display: table;
}

.child {
  margin-top: 20px;
}

总结

在旧版本的浏览器中，margin-top的折叠问题是一个常见的排版问题，需要开发者特别留意。通过添加padding-top或使用伪元素，可以有效避免该问题，使得页面排版更为美观。