Padding在Chrome和IE中的区别

 

div{      width:500px;      padding:0px;  } 

chrome和ie下宽度均为500px，两者相同。

 

但是：

div{      width:500px;    padding:0px 20px 0px 20px;  }  

当padding的值不为0的时候，情况就不一样了。

chrome下 div的总宽度变为：500px+20px+20px=540px；

ie下div的总宽度仍为：500px；（padding被算在了width内）

 

另外:border属性也存在跟padding类似的问题。

 

可以用一个简单的css hack解决上述问题。

 

div{      width:460px;!important;　　/*for chrome*/     width:500px;　　　　　　 　　/*for ie*/     padding:0px 20px 0px 20px; }

ie会忽略 第一个加了!important属性的width，而chrome会识别这个属性。最终ie和chrome下的宽度都为500px。