IE和Firefox层居中，大小偏差解决办法

 在IE中如果想实现层居中可以简单使用下面的语句实现
<div align="center"></div>

可惜在Firefox中是无效的,这估计IE对样式做了自己的解析，Firefox应该是更加严格，偷懒的做法是行不通

请看下面的例子

<style type="text/css">
<!--
#all{width:100%;margin: auto;text-align: center;}
#s{height:30px; width:602px! important; width:600px; margin: auto;}
#s1{float:left;border-top: 1px solid; border-bottom: 1px solid; border-left: 1px solid; border-right: 1px solid; width:100px; height:30px;}
#s2{float:left;border-top: 1px solid; border-bottom: 1px solid; border-right: 1px solid; width:100px; height:30px;}
#s3{float:left;border-top: 1px solid; border-bottom: 1px solid; border-right: 1px solid; width:100px; height:30px;}

#s0{float:left;border-bottom: 1px solid;width:300px; height:30px; margin-left:-3px! important;margin-left:0px; margin-top:1px! important;margin-top:0px; }

#c{margin: auto;border-bottom: 1px solid; border-left: 1px solid; border-right: 1px solid; width:600px; height:50px; margin-top:1px! important;margin-top:0px;}
-->
</style>
<div id="all">

<div id="s">
<div id="s1"></div>
<div id="s2"></div>
<div id="s3"></div>
<div id="s0"></div>
</div>

<div id="c"></div>

</div>

 

 

在上面例子中需要实现层居中，我们只需要外嵌一个层all，编写层样式 margin: auto; text-align: center;
里面的层s中加入width:600px; margin: auto;样式就能实现居中对齐
看到#s这样一句，为何需加入width:602px! important; 后面为什么还有一个width:600px;  因为width:602px! important; IE是不做解析，Firefox却只认这个，遇到大小偏差问题，就需要用到:)