炒冷饭系列之IE Bug(5) —— 怪异模式下的盒子居中问题

当一个html页面头部没有声明DTD的时候,在IE浏览器中就会进入怪异模式,怪异模式下页面渲染标准会遵循IE6以下的低版本渲染标准,从而在IE浏览器中会出现很多异常情况。我们在让一个盒子居中在一个容器时,常常会使用设置margin的左右间距值为auto来实现,然而IE的怪异模式会不认识这个auto值,导致页面无法实现我们想要的效果。在本例中我们删掉页面头部的DTD声明,从而使IE进入怪异模式,来达到我们的演示目的。

html代码:

<div id="container">
	<div id="box">
	</div>
</div>


css代码:

#container {
	width:200px;
	height:150px;
	background-color:#999;
	border:2px solid #333;
}
#box {
	width:100px;
	height:100px;
	background-color:#44d;
	margin:25px auto;
}

现代浏览器,如FF、Chrome、Opera等,在没有声明DTD的情况下依然可以正确显示:

正常显示效果

而在IE中(6、7、8如此,更高本版未做测试)却无法使里面的盒模型居中:

怪异模式下的错误显示

解决方法很简单,只需要在容器盒子上增添一个属性即可:

text-align:center;

看到相关资料说既要在容器上设置text-align:center; 还要在需要居中的这个子标签上设置text-align:left; 我确实不知道为何因,因为当我给容器设置text-align:center;后,Bug就已经解除了,可能具体情况不一样吧,望知情者指导。