div没有使用margin:IE9中的auto

Question

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

其实我设法使使用大多数浏览器这项工作确定margin: auto的div问题,同时设定overflow: hidden:

在这里小提琴

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应该像演示中一样灵活.随着可用空间的减少,它应该改变尺寸并挤入.

Answer 1

将中心与浮动隔离

这会影响IE9/10.

如果移除浮动元素,或者如果width使用浮动元素代替,则它可以正常工作max-width.浮动内容的存在,加上使用margin:auto和max-width代替width,似乎令IE9 +混乱.

要解决此问题,请将居中内容放在包装器div中,以便内容的居中可以与侧边栏的浮动分开.换句话说,在单个div中布局方面发生的太多,比IE9 +更能处理.所以将#contentdiv分成两个独立的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,padding: 1em;现在必须单独添加到每个元素.