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打开看看。 box-model-testpage.zip

charlee.li