html - IE9 negative top margin - floated and cleared child makes the element stuck

Question

I've run into a strange problem in IE9, spent a lot of time tracking and reproducing it.

So we have the following markup:

<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>

This results in something like this:

We would like to move the yellow box up (out of the container) and make the .stuff elements clearing. We would like to float at least one .stuff element, let's choose .special, so we do this:

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

On the left, the results we get in Chrome and Firefox, on the right IE9:

As you can see, IE9 is somehow stuck applying the negative margin-top, and it will always get stuck at the element which has right or left float and clear: both; applied on it at the same time. The combination of these two properties is needed, only one of them will not trigger this behavior.

A jsFiddle that demonstrates the problem and can be played with

This problem has come up in a quite large application, for certain reasons I cannot use top instead of margin-top, positioning would break other stuff.

Anybody has any idea how to help IE9 correctly display this?

Answer 1

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

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

jsFiddle