Negative margin-bottom in IE9+ allows scrolling too far - html

Question

Let's consider this fiddle (putting it on JSBin so it works in IE8):
http://jsbin.com/EpuboseG/1/edit
HTML:
<div id="outer">
<div id="inner">
<div id="notVisible">
I am not visible in all browsers (this is what I want)
</div>
1<br>2<br>3<br>4<br>5<br>
6<br>7<br>8<br>9<br>10<br>
11<br>12<br>13<br>14<br>15<br>
16<br>17<br>18<br>19<br>20<br>
</div>
</div>
CSS:
#outer {
overflow-y: scroll;
height: 150px; /*smaller than contents */
background-color: yellow;
width: 400px;
}
#inner {
position: relative;
top: -30px;
margin-bottom: -30px;
background-color:red;
}
#notVisible {
height: 30px; /* due to "top" in #inner I am invisible */
background-color: lime;
}
I have a negative margin-bottom in #inner which is compensated by the same negative top both of 30px. The result in all browsers is that the top 30px of #inner are invisible which is good.
Why I do have margin-bottom:-30px; top:-30px? In order to hide the top 30px of the inner div, and shift everything else up (as if the top 30px of the inner div never existed).
However the issue is that when I use the scrollbar, in IE9+ (IE9,IE10,IE11) I can scroll too far - at the bottom I can see a 30px empty yellow thing. This is not the case in IE8, Firefox, Chrome, Safari, Opera.
Basically any negative margin-bottom provokes this kind of behavior for me.
Is there any workaround for that?
Edit:
It seems that when I remove margin-bottom: -30px; but keep top: -30px, then the roles are switching, i.e. I see yellow background everywhere except IE9+.

Answer 1

You could have conditional statements for IE9, 10 and 11:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9"> // For IE10+
<style>
//rest of the styles
</style>
<!--[if IE]>
<style> //IE9+ specific styles here
</style>
<![endif]-->
<!--[if lte IE 8]>
<style> //IE8 and under specific styles here.
</style>
<![endif]-->
It'd add a few more lines of code, but it works. The meta forces IE10+ to adopt IE9 behaviour, since IE10+ doesn't support if statements anymore. The first if statement targets IE in general, and the second specifically targets IE8 and below. If the browser is IE9+, it'll ignore the second statement and use the styles from the first statement. If the browser is IE8-, it'll use the styles in the second statement. All other browsers ignore the if statements and use the original CSS.