关于IE8、9下DIV不居中的问题解决方案

百度了好多都是下面这种解决方案

<style type="text/css"> 
body{text-align:center;width:100%;} 
#wrap{ 
text-align:left; 
width:560px; 
margin:0 auto; 
border:1px solid #333; 
background-color:#ccc; 
} 
</style> 
<div id="wrap"> 在所有浏览器中都有效的方法: <pre> 在所有浏览器中都有效的方法: 在所有浏览器中都有效的方法: 在所有浏览器中都有效的方法: 
</pre> 
</div>

太烂了这种方案!这样定义,所有body里边的东西都自动居中了,这根本不是每一个人想要的!实际上是因为IE8以上支持的规范变了,DOCTYPE不再是原来的那种了

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
而是使用XHTML1.0规范了,如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

或者使用HTML5规范:

<!DOCTYPE HTML>
<html>
  <head>
...

随着HTML5规范的开发,转向HTML5规范是势在必行,所有浏览器也在慢慢靠近!

所以解决居中问题,只需要改成XHTML声明或者HTML5规范即可,CSS代码依然不变:

body{
	width:1000px; 
	height:auto;
    margin:0px auto;
}

相关推荐