<p>一般情况下，DreamWeaver是我们开发网页的基本工具之一，在我工作的很多时候，我都是用它来完成前端页面的编写的。不管用的是哪个版本，从很早开始，DW自动创建HTML的时候都会包含下面这几行</p>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<p>这其中的第一行就是文档声明，网上随便搜索一下，就可以知道它的作用。很多时候这个文档声明并不受我们的重视，我的一些同事直接就把他删掉了。但是，在删掉之后，噩梦就会开始。没错，就是盒模型！当然，网络上关于盒模型的解释有很多，我们已经很清楚“兼容模式”和“标准模式”。</p>
<p>兼容模式的盒模型大致可以总结为：渲染元素的总宽度=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。高度与宽度是一样的。</p>
<p>兼容模式和标准模式是通过doctype的声明来确定的，在IE浏览器下，如果没有doctype的声明，将采用兼容模式显示（Quirk模式），声明了过渡型和严格型的文档模型将使用标准模式显示。通常情况下，可以通过document.compatMode来获得浏览器使用的模式，如果得到“CSS1Compat”则是标准模式，如果是“BackCompat”则是兼容模式。</p>
<p>总结一下，就是width和height在兼容模式下为除了margin外的总宽高度，而标准模式下，为内部内容的宽度和高度。</p>
<p>另外，这样的模型差异同样在input标签存在。需要注意的是，在input type=text框内的文字的字体字号是需要重新定义的，外部的文字样式不会被继承到input内： input的文字为系统默认的字体和大小，外部的文字定义已经丢掉了。这时我们还需要为input内重新写样式。</p>
