一般情况下，DreamWeaver是我们开发网页的基本工具之一，在我工作的很多时候，我都是用它来完成前端页面的编写的。不管用的是哪个版本，从很早开始，DW自动创建HTML的时候都会包含下面这几行
这其中的第一行就是文档声明，网上随便搜索一下，就可以知道它的作用。很多时候这个文档声明并不受我们的重视，我的一些同事直接就把他删掉了。但是，在删掉之后，噩梦就会开始。没错，就是盒模型！当然，网络上关于盒模型的解释有很多，我们已经很清楚“兼容模式”和“标准模式”。
兼容模式的盒模型大致可以总结为：渲染元素的总宽度=margin-left+width+margin-right，其中，width=border-left+padding-left+width+padding-right+border-right。而标准模式下的盒模型渲染元素的宽度是：总宽度=margin-left+border-left+padding-left+width+padding-right+border-right+margin-right。高度与宽度是一样的。
兼容模式和标准模式是通过doctype的声明来确定的，在IE浏览器下，如果没有doctype的声明，将采用兼容模式显示（Quirk模式），声明了过渡型和严格型的文档模型将使用标准模式显示。通常情况下，可以通过document.compatMode来获得浏览器使用的模式，如果得到“CSS1Compat”则是标准模式，如果是“BackCompat”则是兼容模式。
我特意在IE6上进行了一些测试，代码如下：
width:100px;
height:100px;
padding:20px;
border:10px solid red;
margin:20px;
在IE下标准模式和兼容模式的显示效果如下：
第一个图为兼容模式，第二个图为标准模式。总结一下，就是width和height在兼容模式下为除了margin外的总宽高度，而标准模式下，为内部内容的宽度和高度。
另外，这样的模型差异同样在input标签存在。需要注意的是，在input type=text框内的文字的字体字号是需要重新定义的，外部的文字样式不会被继承到input内：
font-family:"方正姚体";
font-size:30px;
border
}
<input type="text" id="test" value="测试"/>
<div>测试</div>
</body>
效果如下：
input的文字为系统默认的字体和大小，外部的文字定义已经丢掉了。这时我们还需要为input内重新写样式。