最近发现一个问题，在给input设置边框宽度和高度的时候，在不同的浏览器下表现不同，整了很久，这里整理一下发出来。首先说一下，本文只讨论作为行内替换元素的input，且type为text的输入框。其他input类型没有做实验，块元素也不在讨论范围内。
正式讲问题之前要先讲一下css的盒模型，盒模型有W3C的标准盒模型和IE盒模型两种，两者的区别在于如何定义height和width。在W3C标准盒模型中height指的是内容区的高度，在内容区之外还有padding-top,padding-bottom,border-top,border-bottom,margin-top,margin-bottom，也就是说指定的高度就是内容区的高度，不会因为边框的粗细导致内容区的高度变化。而在IE盒模型中，height指的是内容区高度加上padding-top,padding-bottom再加上border-top,border-bottom的高度，一旦指定了height，当让边框变得更粗时，内容区高度就会变的更小。同样的，width的计算也类似。两种盒模型如最后附注所示。
好了，现在开始讲问题。当网页不指定DOCTYPE的时候，不同浏览器对text类型的input使用何种类型的盒模型是由浏览器自己决定的，为了搞清楚浏览器都怎么处理，使用以下代码在Windows平台上做了实验：
<html>
<head>
<title>border test</title>
<style type="text/css">
#input1 {
background-color: yellow;
width:200px;
height:50px;
border:5px solid #000;
}
#input2 {
background-color: yellow;
width:200px;
height:50px;
border: 0px;
}
</style>
</head>
<body>
<input type="text" id="input1" />
<input type="text" id="input2" />
</body>
</html>
这段代码主要是放置了两个高度为input，给其中一个设置5像素宽的边框，然后比较两者的高度。
实验结果如下表：
从图中可以看出，chrome，firefox，safari和IE6一样，使用的是IE盒模型，而IE7到IE10使用的均是W3C盒模型（当然，从图中看IE7的行内对齐可能和IE8以上不同）。也就是说，我给input设置了50像素的高度，在chrome、firefox、safari和IE6下，内容区高度会被减去边框的10像素，只有40像素，而在IE7到IE10中，内容区高度就是50像素。
但是，如果一旦给网页指定doctype，也就是在网页第一行加上这么一行(当然也可以使用html5的标记，只是这样IE6就不认识了)，结果就不一样了。如下图：
从这里可以看出，所有的浏览器都是使用W3C盒模型的，只是IE6和IE7在行内对齐上有一些不同。
总结一下，为了避免踩坑，最好给网页指定doctype，这样就都符合w3c标准了。同时，没搞清楚的是为什么chrome、firefox、safari在未指定doctype情况下会使用IE盒模型，还望有高人解答。
附：两种盒模型（图片来源网络）
