IE9负顶部边缘 - 浮动和清除的孩子使元素卡住

Question

我在IE9中遇到了一个奇怪的问题，花了很多时间跟踪和复制它。

所以我们有以下标记：

<div class="container">
    <div class="movable">
        <div class="stuff">Stuff</div>
        <div class="stuff special">Stuff Special</div>
        <div class="stuff">Stuff</div>
        <div class="stuff">Stuff</div>
    </div>
</div>

这导致如下：

我们希望将黄色框向上移动（从容器中移出）并清除.stuff个元素。我们想浮动至少一个 .stuff元素，让我们选择.special，所以我们这样做：

.movable { margin-top: -70px; }
.stuff { clear: both; }
.special { float: left; }

左侧是我们在Chrome和Firefox中获得的结果，右侧是IE9：

正如您所看到的， IE9在某种程度上无法应用否定的margin-top ，并且它总是会在右侧或左侧float的元素处卡住并clear: both;同时应用。需要这两个属性的组合，其中只有一个不会触发此行为。

A jsFiddle that demonstrates the problem and can be played with

这个问题出现在一个非常大的应用程序中，由于某些原因我不能使用top代替margin-top，定位会破坏其他内容。

任何人都知道如何帮助IE9正确显示这个？

Answer 1

清除.movable element。我不知道你是怎么做的，添加了一个clearfix类等。如果没有，只需添加overflow:hidden就可以了。浮动它也可以修复它，但这可能不适用于您的真实页面。

.movable { margin-top: -70px; overflow:hidden; }

jsFiddle