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;

}

在IE11中打开项目。
当您检查secondsChild元素时，您将看到边距从“first”div下方开始。
将“first”div更改为position：fixed。检查secondsChild元素，您将看到边距在“第一个”文本上方开始。
删除位置：修复“第一个”div。检查secondsChild元素，您将看到边距从“第一个”文本开始。它没有正确重绘。

不应该重新绘制相同或者是否有一些解释我只是看不到？在Internet Explorer团队中没有找到任何对此bug的引用。以前有人经历过吗？

Answer 1

“position：”属性会影响文档流程。元素以“position：static”开头，将它们放入文档流程中。添加“position：fixed”会将元素从文档流中取出，因此环绕或封装元素对“固定”元素的大小，位置等基本上是盲目的。

实际的“margin：”设置不变，只是元素的定位！请注意，一旦我们添加position：fixed，.first不适合.firstChild。这是因为.first不受欢迎！

尝试为元素添加一些彩色边框，以便您可以“看到”它们，仅用于学习目的。我列举了“position：static”，所以你可以看到它与没有声明位置相同。

*{
    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
}

在IE11中奇怪的重绘

1 个答案: