IE 10, when I click on Compatibility button, every

Problem is when I click on compatibility button or in developer tools try to view page in IE 7,8 or 9

When I click on compatibility button (next to URL area) in IE 10, all of the controls on my page, float towards to left.

Not sure what could be wrong, I also tried browser Mode to IE 9, 8 and 7 and still everything stays on left.

I also noticed as soon as refresh page (while being in compatibility mode) everything gets normal.

<div id="outer">
    <div id="inner">
        <div id="content">
            <div id="header">
                <div id="headertext">
                    <div>SomeeeeeeeeText</div>
                    <div class="bp">SomeTexttttttttttttttttttttttt</div>
                </div>
            </div>
        </div>
    </div>
</div>

and

CSS

body {
    font-family: 'Segoe UI', Segoe, Tahoma, Helvetica, Arial, sans-serif;
    text-align: left;
    background-color: #0783FF;
    color: #fff;    
}

#outer {
    display: table;
    height: 100%;
    width: 100%;
}

#inner {
    display: table-cell;
    vertical-align: middle;
}

#content {
    width: 65%;
    margin-left: auto;
    margin-right: auto;
}

#header {
    text-align: center;
    color: #fff;
}

#header>img, #headertext {
    display: inline-block;
}

#headertext {
    text-align: left;
}

#headertext .bp {
    font-size: 2.6em;
    line-height: 0.8em;
}

Updating

Here's a fiddle

Your layout uses relatively modern CSS features like display: table and display: table-cell. These have only been supported since IE8.

However, "Compatibility Mode" will often switch Internet Explorer to Quirks Mode, which is basically IE5.5 mode. I suspect that display: table and display: table-cell do not work here: They were invented after IE5.5 was released.

So really, you have two choices:

Change your doctype to either HTML5 (<!DOCTYPE html>) or HTML 4.01 Strict (<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">) and render in Standards Mode. I'd recommend doing this.
Change your CSS to use technology that was available in IE5.5. Basically, that means using float for layout and fighting with the box model (the way width is calculated is is different between IE and other browsers).

Edit:

If (as inferred from a comment on one of your other questions) you want to vertically centre the #content box, try setting html, body { height: 100%; }. In standards mode, height: 100%; means 100% of the height of the parent element. If html and/or body are only as tall as the content, it won't get vertically centred on the screen.