IE 11 does not recenter DIV - html

Question

I stumbled upon a bizarre behavior of IE (11) using the code below (adapted from this answer).
The centered div does not automatically adjust its position when resizing the browser window.
It works fine in Google Chrome (tested with v31 and v34 canary) and Firefox 26.
→ jsFiddle
<div id="outerWrapper">
<div id="innerWrapper">
Helllo World!<br />
Longer text, longer text, longer text.
yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy.
</div>
</div>
#outerWrapper {
display:inline-block;
position:relative;
left:50%;
}
#innerWrapper {
position:relative;
left:-50%;
}
My system:
Windows 8.1 Pro 64-bit
IE 11 (I also tested the problem with the IE 7, 8 and 9 modes)

Answer 1

Actually, ive changed your code a wee bit so that it does.
#outerWrapper {
display:inline-block;
position:absolute;
left:50%;
width:300px;
margin-left:-150px;
}
#innerWrapper {
position:relative;
}
this auto centers it no matter what.(and i tested on ie11)
EDIT***
also, you can change the width if youd like. i just added a random smaller width
so i could see it better on my small mbp lol.
Cheers

Answer 2

The difference is actually the default font used by IE and Chrome. If you define the font family and size both browsers render the markup the same. This is why many use a CSS reset, there are subtle differences between each browser's default stylesheet. The reset normalizes every browser for your application so you have a consistent base to work from. JSFiddle does not do this by default.
http://jsfiddle.net/docluv/DcLFz/6/
#outerWrapper {
display:inline-block;
position:relative;
left:50%;
background-color:#990000;
height:200px;
}
#innerWrapper {
position:relative;
left:-50%;
background-color:#009900;
font-family:"arial";
font-size:10pt;
}