html – div不会使用margin：auto在IE9中居中

我试图在侧边栏留空的空间中居中.这就是我喜欢它的样子：

我实际上设法使这个工作对大多数浏览器使用margin：auto为div有问题,同时设置overflow：hidden：

Fiddle here

CSS

#header {
    height: 50px;
    background: #224444;
    color: #fff;
}

#container div {
    padding: 1em;
}

#content {
    max-width: 400px;
    margin: auto;
    background: #ddd;
    height: 300px;
    overflow: hidden;
}

#sidebar {
    float: right;
    width: 200px;
    background: #aaa;
    height: 300px;
}

HTML

<div id="container">
    <div id="header">
        PAGE HEADER
    </div>
    <div id="sidebar">
        Sidebar
    </div>
    <div id="content">
       Centered Content
        (Works everywhere but on IE9)
    </div>
</div>

但是,它不适用于IE9. IE8工作正常,这很奇怪！

我的想法已经不多了,所以我想也许有人知道发生了什么？这个技巧似乎在其他任何地方都很有效.

注意：请注意,内容div应该像演示中一样灵活.随着可用空间的减少,它应该改变尺寸并挤入.

解决方法

将中心与浮动隔离

这会影响IE9 / 10.

如果移除浮动元素,或者使用宽度而不是max-width,它可以正常工作.浮动内容的存在,加上使用边距：自动和最大宽度而不是宽度,似乎让IE9感到困惑.

要解决此问题,请将居中内容放在包装器div中,以便内容的居中可以与侧边栏的浮动分开.换句话说,在单个div中布局方面发生的太多,比IE9更能处理.所以将#content div分成两个独立的div.

#header {
    height: 50px;
    padding: 1em;
    background: #224444;
    color: #fff;
}

#content-wrapper {
    overflow: hidden;
}
#content {
    max-width: 400px;
    margin: auto;
    padding: 1em;
    background: #ddd;
    height: 300px;
}

#sidebar {
    float: right;
    width: 200px;
    padding: 1em;
    background: #aaa;
    height: 300px;
}

<div id="container">
    <div id="header">
        PAGE HEADER
    </div>
    <div id="sidebar">
        Sidebar
    </div>
    <div id="content-wrapper">
        <div id="content">
            Centered Content
        </div>
    </div>
</div>

这在IE7 / 8/9/10中测试得很好.另外,因为添加了包装div,所以填充：1em;现在必须单独添加到每个元素.

原文地址：https://www.jb51.cc/html/225449.html