css控制div在ie及firefox中的兼容(有点难度,高手进)

我要控制一个网页中自动伸缩的div样式为body,具体要求如下:

1.层在ie及firefox中都是居中的

2.层没有固定的宽度,只占网页的90%,但是在不同的分辨率下有最小宽度960px,

必须要解决兼容的问题

<style type="text/css">
body {text-align:center;}
.cr {width:90%;border:1px solid red;height:50;min-width:960px;margin:auto;}
* html .cr {_width:expression((documentElement.clientWidth < 960) ? "960px" : "90%" );}
</style>
<div class="cr">I am a box</div>

不知道这样是否满足你的要求。

* html是为了hack IE6不能识别min-width。。。

body{ display:block; margin:0 0 0 0; padding:0 0 0 0;  text-align:center;  color:#4d4e50; line-height:150%; height:100%;font-family:"宋体",Arail,verdana;font-size:12px;}

div#Main{ width:90%; margin-left:auto; margin-right:auto; margin-bottom:0; padding-bottom:0; min-width:960px; }

1、.body{margin:0 auto;}使用margin:0 auto;可使容器在各浏览器下都居中显示

2、.body{width:90%;min-width:960px;}容器宽度设置90%，在IE7以上及其他浏览器可以识别最小宽min-width，在IE6下可以使用JS来做，另外不使用JS也可以解决，不过要结构稍微复杂一点，代码如下：

<div style="margin:0 auto;background:#f00;_margin-left:960px;zoom:1:> <div >   <div ></div>  </div> </div>

这个样式兼容性不是大问题，样式用MARGIN:0 auto; 就可以居中WIDTH:90%;HEIGHT:auto;就可以，但要在不同的分辨率下有最小宽度960px，max-width: 可以实现到ie8和火狐但Ie6就不行了，要加上javascript来做