问题是当我单击兼容性按钮或在开发人员工具中尝试在 IE 7,8 或 9 中查看页面时
当我单击 IE 10 中的兼容性按钮（URL 区域旁边）时，页面上的所有控件都会向左浮动。
不知道出了什么问题，我还尝试了 IE 9、8 和 7 的浏览器模式，但一切仍然位于左侧。
我还注意到，一旦刷新页面（在兼容模式下）一切都会正常。
<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
这是一个小提琴 http://jsfiddle.net/6wGnV/
