(Above this element is a 200px tall floated element width a negative top margin of -300px which should alow the 100px negative top margin on the element below to take effect.)
This is a non floated element with a negative top margin of -100px but is also has clear:both applied. It also has a border-top of 120px orange just for demo purposes. There should just be 20px of orange displaying at the top but IE11 shows 120px of orange.
Removing the clear:both fixes the issue but it shouldn't have made a difference in this instance.
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;
margin:-100px auto 0;
clear:both;
border-top:120px solid orange;
}
HTML
<div class="float">This is a floated element of 200px high with a negative top margin of -300px</div>
<div class="test">
<p>This is a non floated element with a negative top margin of -100px but is also has clear:both applied. It also has a border-top of 120px orange. There should just be 20px of orange displaying at the top but IE11 shows 120px of orange.</p>
<p>Removing the clear:both fixes the issue but it shouldn't have made a difference in this instance.</p>
</div>