问题描述
问题是当我点击兼容性按钮或开发人员工具尝试在IE 7,8或9中查看页面时
当我点击兼容性按钮时（旁边URL区域）在IE 10中，我的页面上的所有控件都向左移动。不知道什么可能是错误的，我也试过浏览器模式到IE 9 ，8和7，仍然一切都保持在左边。
我也注意到，只要刷新页面（在兼容模式下），一切都正常。 b
$ b
< div id =outer>
< div id =inner>
< div id =content>
< div id =header>
< div id =headertext>
< div> SomeeeeeeeeText< / div>
< div class =bp> SomeTexttttttttttttttttttttt< / div>
< / div>
< / div>
< / div>
< / div>
< / div>
和
CSS
body {
font-family：'Segoe UI'，Segoe，Tahoma，Helvetica，Arial，sans-serif;
text-align：left;
背景颜色：＃0783FF;
颜色：#fff;
}
#outer {
display：table;
身高：100％;
宽度：100％;
}
#inner {
display：table-cell;
vertical-align：middle;
}
#content {
width：65％;
margin-left：auto;
margin-right：auto;
}
#header {
text-align：center;
颜色：#fff;
}
＃header> img，#headertext {
display：inline-block;
}
#headertext {
text-align：left;
}
#headertext .bp {
font-size：2.6em;
line-height：0.8em;
更新
您的布局使用相对现代的CSS功能，如 display：table 和 display：table-cell 。这些仅在IE8以后才得到支持。
然而，兼容模式通常会将Internet Explorer切换到Quirks模式，该模式基本上是IE5.5模式。我怀疑 display：table 和 display：table-cell 在这里不起作用：它们是在IE5.5之后发明的所以真的，你有两个选择：
$ b
-
将您的文档类型更改为HTML5（<！DOCTYPE html> ）或HTML 4.01 Strict（<！DOCTYPE HTML PUBLIC - // W3C // DTD HTML 4.01 // ENhttp://www.w3.org/TR/html4/strict.dtd> ）并在标准模式下呈现。我建议这样做。
改变你的CSS以使用IE5.5中提供的技术。基本上，这意味着使用 float 进行布局并与盒子模型作斗争（计算宽度的方式在IE和其他浏览器之间是不同的）。
编辑：
评论），你想垂直居中 #content 框中，尝试设置 html，body {height：100％; } 。在标准模式下， height：100％; 表示父元素高度的100％。如果html和/或body只与内容一样高，它不会在屏幕上垂直居中。
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
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.
这篇关于IE 10，当我点击兼容性按钮时，一切都会左移的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！