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;现在必须单独添加到每个元素.

相关文章

vue阻止冒泡事件 阻止点击事件的执行 &lt;div @click=&a...
尝试过使用网友说的API接口获取 找到的都是失效了 暂时就使用...
后台我拿的数据是这样的格式: [ {id:1 , parentId: 0, name:...
JAVA下载文件防重复点击,防止多次下载请求,Cookie方式快速简...
Mip是什么意思以及作用有哪些