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

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中进行验证).

但是,当我测量绘画中的元素时,div的内部空间为14像素,正如预期的那样(10 + 2 + 2).但是,输入内部有16像素,然后是外部边框.为什么是这样？可能不是一个错误,因为它发生在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中.