html – div不会使用margin:auto在IE9中居中
发布时间:2020-12-14 18:42:38 所属栏目:资源 来源:网络整理
导读:我试图在侧边栏留空的空间中居中.这就是我喜欢它的样子: 我实际上设法使这个工作对大多数浏览器使用margin:auto为div有问题,同时设置overflow:hidden: Fiddle here CSS #header { height: 50px; background: #224444; color: #fff;}#container div { pad
我试图在侧边栏留空的空间中居中.这就是我喜欢它的样子:
我实际上设法使这个工作对大多数浏览器使用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;现在必须单独添加到每个元素. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |