代码之家 › 专栏 › 技术社区 › erikkallen

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

width input css html

erikkallen · 技术社区 · 17 年前

为什么我会这样做:

<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,它将具有与具有0px边框的div相同的宽度(通过将其包装在带边框的范围内进行验证)。

4 回复 | 直到 17 年前

pegasus4747 17 年前

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

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

那么两者的宽度是相同的,至少在FF中是相同的。

jason 13 年前

这个 看得见的 元素的宽度为 width + padding + border + outline ,因此您似乎忘记了输入元素上的边框。也就是说,在大多数(某些?)浏览器上,输入元素的默认边框宽度实际上计算为2px,而不是1。因此,您的输入显示为2倍宽。尝试显式设置 border-width 在输入上,或使您的div更宽。