标准盒子模型和IE盒子模型的区别是width的区别,
CSS盒模型图解
下面是一幅关于应用了CSS的元素是如何显示它的尺寸的图示。
在本篇文章中,所有的浏览器在计算盒模型总宽度时处理margin属性的方式都是一致的,所以我们将更多的精力放在padding和border属性上。
W3C盒模型
首先看一下《 the W3C box model》,这里所写出的标准,如果没问题的话,是应该被所有标准的现代浏览器及IE6和它的后续版本所遵循的。在W3C盒模型中,一个块级元素的总宽度按照如下的方程式计算:
总宽度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right
对于高度也使用同样的计算方法,但是为了简便起见从现在开始我只说width。
IE盒模型
IE盒模型的计算方式和W3C的很相似,但有一点是非常不同的,这就是:填充和边框并不被包含在计算的范围内。
总宽度 = margin-left + width + margin-right
这就意味着一旦元素拥有横向的填充和/或边框,实际的内容区域(content area )就要扩大来创造出他们占据的空间。
http://www.osmn00.com/translation/213.html