（转）IE的box模型显示bug
box模型即由<div>等块元素的 margin、padding、border、width、height 等属性构成的显示模型，它是CSS布局的基础。通过设置<div>的各种属性，可以得到任何想要的页面效果。
各个元素的含义如下：
- margin: box外边界到外层元素的距离，即余白。
- border: box的边界宽度。
- padding: box内的内容到box内边界的距离，即边距。
- width: box的宽度。
- height: box的高度。
其中有问题的就是 width 和 height 的定义。一般的浏览器将 width 和 height 定义为除掉 margin、padding、border 之后的box内容的大小，实际上 box 所占有的面积为定义的 width/height 再加上 margin、padding、border的大小。
下图演示了一个box模型的大小计算方式，背景中每个方格为 10px。源代码如下：
#box {
width: 150px;
height: 100px;
background: #F00;
border: solid 20px green;
padding: 30px;
margin: 10px;
}
<div id="box">
<div id="content"></div>
</div>
可以看到，这个 150x100 的 box 实际上中间的内容部分为 150x100，算上 margin、border、padding 的总大小为 270x220。
而 IE 在 Quirk模式(兼容模式)下，计算width和height时会将margin、border、padding算进去， width和height成为了box的总大小。上面的代码在 IE 下显示结果如下：
那么如何让 IE 与其他的浏览器显示效果相同？可以通过在HTML文档开头指定 DOCTYPE 使 IE 工作在 Standard模式而不是 Quirk模式下。例如：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> ....
下面是各种 DOCTYPE 下IE对box模型的渲染方法的测试页面，有兴趣的可以用IE打开看看。
版权声明：可以任意转载，但转载时必须标明原作者charlee、原始链接http://tech.idv2.com/2007/01/02/ie-box-model-bug/以及本声明。
