大佬教程收集整理的这篇文章主要介绍了html – div不会使用margin:auto在IE9中居中,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我实际上设法使这个工作对大多数浏览器使用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应该像演示中一样灵活.随着可用空间的减少,它应该改变尺寸并挤入.
这会影响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;现在必须单独添加到每个元素.
以上是大佬教程为你收集整理的html – div不会使用margin:auto在IE9中居中全部内容,希望文章能够帮你解决html – div不会使用margin:auto在IE9中居中所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。