I have encountered an unusual issue in IE9 and I have spent a significant amount of time trying to track it down and replicate it.
Here is the code snippet that we are working with:
<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 code produces the following layout:
We are trying to move the yellow box above (outside of the container) and ensure that the .stuff elements clear properly. We want to float at least one .stuff element, specifically .special, so we implemented the following CSS:
.movable { margin-top: -70px; }
.stuff { clear: both; }
.special { float: left; }
On the left side are the results seen in Chrome and Firefox, while on the right side are those from IE9:
As you can observe, IE9 seems to be having difficulty applying the negative margin-top, and it consistently gets stuck on the element that has both right or left float and clear: both; applied to it concurrently. This unique combination of properties triggers this erratic behavior.
Here is a jsFiddle demonstrating the issue, which you can experiment with
This issue has arisen within a rather large application, and due to certain constraints, using top instead of margin-top would disrupt other functionalities.
Does anyone have any suggestions on how to address this problem in order to correctly display it in IE9?