IE11 negative margin bug

Here’s a strange little IE11 bug that just broke about 30 sites that I have worked on so I thought I’d give you the heads up :slight_smile:

Take a look at this simple demo in IE11 and then in any other browser.

Here’s a screenshot of both behaviours.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Bug in IE11</title>
<style type="text/css">
p { margin:0 0 1em }
html, body {margin:0;}
.float {
	width:100%;
	height:200px;
	background:red;
	float:left;
	margin-top:-300px;
}
.test {
	background:green;
	position:relative;
	z-index:1;
	width:960px;
	padding:0 10px;
	margin:-100px auto 0;
	clear:both;
	border-top:120px solid orange;
}
</style>
</head>

<body>
<div class="float">Float</div>
<div class="test">
		<p>IE11 shows 120px of orange above the green. All other browsers show 20px of orange as expected.</p>
</div>
</body>
</html>

The float has been dragged upwards with a negative top margin of 300px and is 200px tall which should mean the bottom of the float is 100px above the viewport. Therefore any element that follows and even if clear both has been applied should proceed to the bottom edge of the float and result in the element being dragged upwards by its 100px negative margin through the top of the viewport by 100px. All other browsers except ie11 do this.

IE11 ignores the top margin as though the bottom of the float was flush with the top of the viewport which it is not. Removing the clear:both from the following element allows the top margin to work correctly in IE11 which confirms that the bottom of the float is in fact 100px above the top of viewport.

Although this bug may seem obscure the technique is often seen in sticky footer techniques where a wrapper is dragged upwards in order to make room for a sticky footer and in certain circumstances could trigger this bug. Indeed in our sticky footer quiz (a while ago) a fix for an Opera bug was found using :before to create a negative top margined float which when combined with clear:both on the outer element will always trigger the bug in IE11. The clear:both can be removed to fix the problem as the reason for it being in place is no longer necessary anyway.

I would advise against using any of those old sticky footer routines these days anyway and just go with the display:table version which doesn’t need any negative margins or fixed heights.

Thanks for the tip, Paul. I’m shocked to hear that there’s a bug in IE, though. :shifty:

Yes what a shock ?

I filed a bug here at the MS connect [URL=“https://connect.microsoft.com/IE/Feedback”]feedback site so if you have time you can confirm it.

There’s also some other interesting IE11 bugs listed there especially the one where opacity with a value greater than zero and less than one seems to apply position:relative to an element and any co-ordinates move the element even if you explicitly state position:static!