html - 输入类型的宽度=文本元素

Question

为什么我这样做:

<input type="text" style="width: 10px; padding: 2px"/>
<div style="width: 10px; border: solid 1px black; padding: 2px">&nbsp;</div>

输入最终比 IE6 和 FF3 中的 div 宽 2 px？我错过了什么？

编辑:正如许多人所说，边界是问题所在。如果我在输入上设置 border: 0px，它将与具有 0 px 边框的 div 具有相同的宽度(通过将其包装在带边框的 SPAN 内进行验证)。

但是，当我测量 paint 中的元素时，div 有一个 14 px 的内部空间，正如预期的那样 (10+2+2)。然而，输入有一个 16 px 的内部，然后在它外面有一个边框。为什么是这样？可能不是错误，因为它在 IE6 和 FF3 中都会发生，但我不明白。

Answer 1

我相信这正是浏览器呈现其标准输入的方式。如果在输入上设置边框:

<input type="text" style="width: 10px; padding: 2px; border: 1px solid black"/>
<div style="width: 10px; border: solid 1px black; padding: 2px"> </div>

然后两者的宽度相同，至少在 FF 中是这样。