Question

问题是当我点击兼容性按钮或在开发者工具中尝试查看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>

和

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;
}

更新

Here's a fiddle

Answer 1

您的布局使用相对现代的CSS功能，例如display: table和display: table-cell。这些仅在IE8之后得到支持。

然而，＆＃34;兼容模式＆＃34;经常将Internet Explorer切换到Quirks模式，这基本上是IE5.5模式。我怀疑display: table和display: table-cell在这里不起作用：它们是在IE5.5发布后发明的。

所以，你有两个选择：

将您的文档类型更改为HTML5（<!DOCTYPE html>）或HTML 4.01严格（<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">）并在标准模式下呈现。我建议这样做。
更改CSS以使用IE5.5中提供的技术。基本上，这意味着使用float进行布局并与盒子模型进行斗争（计算宽度的方式在IE和其他浏览器之间是不同的。）

修改：

如果（根据对one of your other questions的评论推断）您希望垂直居中#content框，请尝试设置html, body { height: 100%; }。在标准模式下，height: 100%;表示父元素高度的100％。如果html和/或正文仅与内容一样高，则不会在屏幕上垂直居中。

IE 10，当我点击兼容性按钮时，一切都向左移动

1 个答案: