在IE11中的奇怪重绘

Question

我已经减少了css和html到这个http://jsfiddle.net/LYME9/4/。

<div class="first">
    <div class="firstChild">First</div>
</div>
<div class="second">
    <div class="secondsChild">
        child
    </div>
</div>

.first{
    clear:both;

}
.firstChild{
    float:left;

}
.secondsChild{
    float:left;
    clear:both;
    margin-top:100px;

}

1. 在IE11中打开项目。

1. 当您检查secondsChild元素时，您将看到边距就在“第一个”div下面开始。

1. 将“第一个”div更改为“有位置:固定”。检查secondsChild元素，您将看到边距开始于“第一个”文本之上。

1. 移除位置:固定“第一个”div。检查secondsChild元素，您将看到边距开始于“第一个”文本之上。它没有正确地重新绘制。

它不是应该被重新绘制相同的，还是有什么解释，我只是不明白？在internet资源管理器团队中没有发现任何有关此错误的引用。以前有人经历过吗？

Answer 1

“位置：”属性影响文档流。元素以“位置:静态”开头，将它们放入文档流中。添加“位置:固定”将元素从文档流中提取出来，因此包围或封装元素本质上是对“固定”元素的大小、位置等不透明的。

实际的“保证金：”设置是不变的，只有定位的元素！请注意，.first不适合.firstChild，一旦我们添加位置:固定。这是因为.first出了流！

尝试在元素中添加一些彩色边框，这样您就可以“看到”它们，这只是为了学习。我已经列举了“立场:静态”，因此您可以看到，它与没有声明立场是一样的。

*{
    margin:0; padding:0;
}
.first{
    position:static;
    border:1px solid #f0f;
    clear:both;
    padding-bottom:5px;
}
.firstChild{
    border:1px solid #0f0;
    float:left;
}
.second{
   border:1px solid #00f;
}
.secondsChild{
    border:1px solid #f00;
    float:left;
    clear:both;
    margin-top:60px;
    width:800px
}