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。