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。