ie html自动居中,html – div不会使用margin：auto在IE9中居中

将中心与浮动隔离

这会影响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;

}

PAGE HEADER

Sidebar

Centered Content

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