DIV多层嵌套margin-top的BUG问题

今天在进行登录页面开发时，遇到了一处关于 `margin-top` 的小bug。

初始的代码布局大致是这样的：一个包含logo的div，紧接着是一个包含登录文本的div，其中还有一个带有错误提示信息的子div。在CSS样式中，给这个错误提示的div设置了`margin-top: 10px;`。

代码示例：

```html

```

```css

.errorstyle {

height: 20px;

width: 225px;

background-color: FFCCCC;

color: F00;

font-size: 12px;

border: FF0000 solid 1px;

margin-top: 10px; / 这里是问题的关键 /

}

```

在实际测试中，IE6和IE7的表现是正常的，但在IE8和Firefox中却出现了预期外的表现。

问题的症结在于：当两个容器嵌套，且它们之间没有其它元素时，Firefox会将内层元素的`margin-top`作用到父元素上。这在某些情况下可能导致布局上的问题。

解决方案有两个：

解决方案一：使用浮动来解决问题。将子元素的代码修改为：

```css

.errorstyle {

/ 其他样式不变 /

float: left;

}

```通过浮动，可以避免Firefox对`margin-top`的特殊处理。

解决方案二：使用`padding-top`来替代`margin-top`（但由于Firefox的盒模型问题，这种方法不太推荐）。

最终，通过调整布局或样式设置，成功解决了这个问题。值得注意的是，其实这是一个外边距叠加的问题。在Firefox和IE8中，这种叠加是正常的，而在IE6和IE7中则是异常的。浮动元素不会产生外边距的叠加，因此它间接解决了遇到的浏览器兼容性问题。